nietaL
NGBler
Hey Leute,
zur Veranschaulichung hängt ein Bild an. Der große rote div-Container <div> wird mit <img> (grün) und <div> (rot) befüllt. Die Bilder (Fahrzeuge) reihen sich sauber nebeneinander ein und verbreitern, wenn notwendig, den großen Div-Container. Obwohl diese nun schon übermäßig breit und scrollbar ist, verhalten sich unteren kleinen Div-Container nicht wie gewünscht:
Es wird je Einheit ein math. Bruch und dazu ein Bild erzeugt. Beide sind jeweils in einem <div style="float:left;">. Auch diese reihen sich sauber nebeneinander ein. Jedoch brechen sie die Zeile um, sobald sie an den Rand des übergeordneten Div-Containers kommen, obwohl dieser bereits scrollbar ist.
[src=html4strict]
<div style="width:100%; height:340px; white-space: nowrap; overflow: auto; overflow-y:hidden;" >
<img src="XXX"><img src="XXX"><img src="XXX"><img src="XXX"><br>
<img src="YYY"><img src="YYY"><img src="YYY"><br>
<img src="ZZZ"><img src="ZZZ"><img src="ZZZ"><img src="ZZZ"><img src="ZZZ"><img src="ZZZ"><br>
<div style="float:left; margin-left:12px;">BRUCH</div><div style="float:left;">BILD</div><div style="float:left; margin-left:12px;">BRUCH</div><div style="float:left;">BILD</div> //usw.
</div[/src]
Wie schaffe ich es, dass alles in einer Reihe bleibt und keinen Umbruch (außer durch <br>) erzeugt wird?
zur Veranschaulichung hängt ein Bild an. Der große rote div-Container <div> wird mit <img> (grün) und <div> (rot) befüllt. Die Bilder (Fahrzeuge) reihen sich sauber nebeneinander ein und verbreitern, wenn notwendig, den großen Div-Container. Obwohl diese nun schon übermäßig breit und scrollbar ist, verhalten sich unteren kleinen Div-Container nicht wie gewünscht:
Es wird je Einheit ein math. Bruch und dazu ein Bild erzeugt. Beide sind jeweils in einem <div style="float:left;">. Auch diese reihen sich sauber nebeneinander ein. Jedoch brechen sie die Zeile um, sobald sie an den Rand des übergeordneten Div-Containers kommen, obwohl dieser bereits scrollbar ist.
[src=html4strict]
<div style="width:100%; height:340px; white-space: nowrap; overflow: auto; overflow-y:hidden;" >
<img src="XXX"><img src="XXX"><img src="XXX"><img src="XXX"><br>
<img src="YYY"><img src="YYY"><img src="YYY"><br>
<img src="ZZZ"><img src="ZZZ"><img src="ZZZ"><img src="ZZZ"><img src="ZZZ"><img src="ZZZ"><br>
<div style="float:left; margin-left:12px;">BRUCH</div><div style="float:left;">BILD</div><div style="float:left; margin-left:12px;">BRUCH</div><div style="float:left;">BILD</div> //usw.
</div[/src]
Wie schaffe ich es, dass alles in einer Reihe bleibt und keinen Umbruch (außer durch <br>) erzeugt wird?