|
|||
Text, iframe und Buttons in selbe Zeile sowie Größe des iframe = deren Inhalt
Abend,
ich suche eine Möglichkeit nachfolgenden Inhalt( Text, iframe, buttons) in eine Zeile zu legen ohne JavaScript zu benutzen. Leider funktioniert die Vorlage des "elestic-frame" nicht so wie sie soll. Im iframe wird einfach nur eine Seite mit Text "HALLO WELT!" aufgerufen und je nach Schriftgröße soll sich das iframe an den neuen Text anpassen! HTML-Code:
<style> .elastic-frame { position: relative; padding-top: 30px; height: 0; overflow: hidden; } .elastic-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> <div style="border:1px solid black" padding: 5px 20px 5px 20px;"> <div style="float: left;"> <p style="font-size: 30px; font-family: Coolvetica; font-weight: bold; margin: 0px; display: inline;">TEST</p> </div> <div class="elastic-frame"><iframe src="world.php" frameborder="0"></iframe></div> <div style="float: left;"> <INPUT type="submit" id="submit" value="one"> <INPUT type="submit" id="submit" value="two"> </div> <div style="float: right;"> <INPUT type="submit" id="submit" value="last"> </div> </div> |
Sponsored Links |
|
||||
wie meinst du das ? So ? https://codepen.io/basti1012/pen/LMVQEd
|
|
|||
Habs jetzt so gelöst...
HTML-Code:
<style> .flex-container { display: flex; display: -webkit-flex; display: -ms-flexbox; flex-direction: row; align-items: center; justify-content: center; } .text { flex-basis: auto; } .iframe { flex-basis: auto; } .buttons { flex-basis: auto; } .button_last { flex-basis: auto; margin-left: auto; } </style> <div class="flex-container"> <div class="text"> <p style="display: inline;">TEST</p> </div> <div class="iframe"> <iframe style="height: 28px; width: 100px;" frameborder="0" src="site.html"></iframe> </div> <div class="buttons"> <INPUT type="submit" id="submit" value="button1"> <INPUT type="submit" id="submit" value="button1"> </div> <div class="button_last"> <INPUT type="submit" id="submit" value="button_last"> </div> </div> |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hover effekt auf ganze TD zelle | gandalf_hh | CSS | 27 | 13.07.2011 20:06 |
Wrapper wächst nicht mit, keine Floats | maclady | CSS | 11 | 10.02.2010 18:30 |
Wachsende Container | Andy CD | CSS | 13 | 10.02.2010 14:08 |
iframe Größe bei Laden des Inhalts an dessen Größe anpassen | wiseguy | Javascript & Ajax | 0 | 24.06.2007 23:04 |
layout ohne tabellen | rw597678 | CSS | 3 | 23.04.2005 13:31 |