zwei variabel breite Elemente zwingend nebeneinander bearbeitet von MrMurphy1 30.04.2016 08:53 Hallo Ich sehe zur Zeit mit den vorliegenden Informationen folgende Lösung: ~~~html <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Layout 01</title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--[if lt IE 9]> <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script> <![endif]--> <style> @media all { header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } *, *::before, *::after { box-sizing: border-box; } html { font-family: sans-serif; font-size: 120%; line-height: 1.3; } body { margin: 0; } } /*Spezielle Einstellungen vom Original*/ @media all { body { background: #666; } section { margin: 0 0 1rem 0; } section h1 { background: white; /*text-align: right;*/ /*display: inline-block;*/ /*vertical-align: middle;*/ box-shadow: 0 0 2rem white; /*max-width: calc(50% - 0.5rem - 1rem);*/ /*width: auto;*/ padding: 0.5rem; border: 1px solid red; margin-right: 0.5rem; } section p { background: white; position: relative; /*display: inline-block;*/ /*vertical-align: middle;*/ box-shadow: 0 0 2rem white; /*max-width: calc(50% - 0.5rem - 3rem);*/ padding: 0.5rem 1rem; border: 1px solid red; margin: 0 0 0 2rem; } section p::before { content: ""; position: absolute; left: -2rem; top: calc(50% - 0.5rem); width: 0; border-color: transparent red; border-style: solid; border-width: 0.5rem 2rem 0.5rem 0; } } /*Flexbox*/ @media all { section { max-width: 850px; padding: 1rem; display: flex; align-items: center; } section p { flex-grow: 1; flex-shrink: 1; flex-basis: auto; } } </style> </head> <body> <main role="main"> <section> <h1>Überschrift</h1> <p>Dieser Textabsatz könnte breiter sein, als der verfügbare Platz. Deshalb wird er umbrechen. Aber wo bleibt die Überschrift?</p> </section> <section> <h1>kurz</h1> <p>Auch dieser Textabsatz könnte breiter sein, als der verfügbare Platz. Deshalb wird auch er umbrechen. Aber wo bleibt dieses mal die Überschrift?</p> </section> </main> </body> </html> ~~~ Und zeitweilig zum direkten anschauen und ausprobieren: [http://boratb.bplaced.net/index07.html](http://boratb.bplaced.net/index07.html) Gruss MrMurphy
zwei variabel breite Elemente zwingend nebeneinander bearbeitet von MrMurphy1 30.04.2016 08:55 Hallo Ich sehe zur Zeit mit den vorliegenden Informationen folgende Lösung: ~~~html <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Layout 01</title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--[if lt IE 9]> <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script> <![endif]--> <style> @media all { header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } *, *::before, *::after { box-sizing: border-box; } html { font-family: sans-serif; font-size: 120%; line-height: 1.3; } body { margin: 0; } } /*Spezielle Einstellungen vom Original*/ @media all { body { background: #666; } section { margin: 0 0 1rem 0; } section h1 { background: white; /*text-align: right;*/ /*display: inline-block;*/ /*vertical-align: middle;*/ box-shadow: 0 0 2rem white; /*max-width: calc(50% - 0.5rem - 1rem);*/ /*width: auto;*/ padding: 0.5rem; border: 1px solid red; margin-right: 0.5rem; } section p { background: white; position: relative; /*display: inline-block;*/ /*vertical-align: middle;*/ box-shadow: 0 0 2rem white; /*max-width: calc(50% - 0.5rem - 3rem);*/ padding: 0.5rem 1rem; border: 1px solid red; margin: 0 0 0 2rem; } section p::before { content: ""; position: absolute; left: -2rem; top: calc(50% - 0.5rem); width: 0; border-color: transparent red; border-style: solid; border-width: 0.5rem 2rem 0.5rem 0; } } /*Flexbox*/ @media all { section { max-width: 850px; padding: 1rem; display: flex; align-items: center; } } </style> </head> <body> <main role="main"> <section> <h1>Überschrift</h1> <p>Dieser Textabsatz könnte breiter sein, als der verfügbare Platz. Deshalb wird er umbrechen. Aber wo bleibt die Überschrift?</p> </section> <section> <h1>kurz</h1> <p>Auch dieser Textabsatz könnte breiter sein, als der verfügbare Platz. Deshalb wird auch er umbrechen. Aber wo bleibt dieses mal die Überschrift?</p> </section> </main> </body> </html> ~~~ Und zeitweilig zum direkten anschauen und ausprobieren: [http://boratb.bplaced.net/index07.html](http://boratb.bplaced.net/index07.html) Gruss MrMurphy
nicht angemeldet
