Jörg Reinholz: Umbruch bei divs verhindern

Beitrag lesen

SELF-Forum

Umbruch bei divs verhindern

Jörg Reinholz
– Informationen zu den Bewertungsregeln

<style>
   .myDiv {
       float:left;
    }

#myInnerDiv {
       float:rigth;
    }
</style>

<div class="myDiv" style="width:94%">
   <div id="myInnerDiv"></div>
</div>
<div class="myDiv"></div>
<div class="myDiv"></div>


>   
> Mit einer Mindestbreite ist es nicht getan. Die Breite sollte variabel sein, wenn das Fensterbbreite sich ändert. Die divs sollten aber halt nicht umbrechen.  
  
Du meinst, die div der klasse myDiv sollen hübsch nebeneinander bleiben?  
  
Naja. Es könnte auch so gehen:  
  
~~~html
<!doctype html>  
<div style="min-width:999px;padding:0;margin:0">  
   <div style="display:inline-block;margin:0;width:333px;background-color:red;border:0">Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, </div>  
   <div style="display:inline-block;margin:0;width:333px;background-color:blue;border:0">Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, </div>  
   <div style="display:inline-block;margin:0;width:333px;background-color:green;border:0">Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, </div>  
</div>

Alternativ kann man auch ein Verhalten wie bei einer Tabelle erzwingen:

<!doctype html>  
  
<style type="text/css">  
.table {display:table;}  
.row {display:table-row; }  
.cell{display:table-cell; width:33%}  
</style>  
  
  
<div class="table">  
  <div class="row">  
    <div class="cell" style="background-color:red">Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, </div>  
    <div class="cell" style="background-color:blue">Foo, Bar, Foo, Bar,  Foo, Bar, </div>  
    <div class="cell" style="background-color:green">Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, </div>  
 </div>
Beitrag melden
–
Informationen zu den Bewertungsregeln