ugrás a tartalomhoz

div elrendezési probléma

Blackfriar · 2014. Aug. 22. (P), 06.22
Sziasztok !
4 db div-et szeretnék elrendezni olymódon, hogy 3 egymás alatt legyen, de úgy, hogy magasságban összesen pontosan akkora területet foglaljanak el, mint a tőlük jobbra elhelyezkedő 4. div magassága és a 3 div közötti szabad hely egyenletesen legyen elosztva függőleges irányban.

<div id="wrap" style="float:left">
  <div id="1"></div>
  <div id="2"></div>
  <div id="3"></div>
</div>
<div id="4"></div>
A flexbox-szal kísérletezgettem, de csak akkor kaptam a várt eredményt, ha a wrap-nek fix magasságot adtam. A 4 div közül ugyanis egyiknek sincs fix magassága.
Próbáltam azt is, hogy a wrap-es div helyett td-t tettem be, ekkor azonban a 3 egymás alatti div összecsúszott és a td aljára került, tehát egyvonalba a 4.div aljával.

Előre is köszönöm a segítségeteket.
‹ Képbe Iframe hogyan? Url probléma ›
 ■
1

Flexbox

Endyl · 2014. Aug. 22. (P), 08.40
Flexboxszal én így csinálnám:

html:
<div class="flex">
    <div class="sidebar">
        <div class="sidebar-box">1</div>
        <div class="sidebar-box">2</div>
        <div class="sidebar-box">3</div>
    </div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc felis, vulputate ut nulla lobortis, tincidunt mollis erat. Etiam at turpis id magna fermentum dapibus pellentesque vel nunc. Mauris sit amet dolor augue. Nam suscipit in mi sed tincidunt. Nulla faucibus lorem ut sem pulvinar, in euismod urna luctus. Aenean odio augue, interdum quis felis quis, porttitor commodo nunc. Suspendisse eleifend felis quis commodo vestibulum. Nullam egestas quam accumsan vestibulum lacinia.</p>
        <p>Vestibulum viverra sagittis nunc, id eleifend leo bibendum vitae. Mauris sodales volutpat metus ut sagittis. Ut accumsan odio sed lobortis commodo. Suspendisse tincidunt suscipit urna, quis venenatis tellus accumsan sed. Nam tempus euismod placerat. Sed dui arcu, pharetra eget convallis vel, venenatis vel tellus. Integer lobortis feugiat lectus, in feugiat urna mattis vitae. Ut libero magna, fringilla a sodales ut, lacinia ut dolor. Vestibulum in risus justo. Maecenas bibendum lectus ut ante egestas, at elementum felis bibendum.</p>
    </div>
</div>
css:
.flex {
    display: flex;
    background: #000;
    color: #fff;
}

.sidebar {
    display: flex;
    flex-direction: column;
    min-width: 100px;
}

.sidebar-box {
    flex-grow: 1;
    margin: 1em;
    background: #999;
}

.content {
    margin: 1em;
    background: #999;
}
Ha a három doboznak a magassága akkora kell legyen, mint a tartalmuknak és az üres helyet kell elosztani, akkor a .sidebar kap egy ilyet pluszban:
justify-content: space-between;
a .sidebar-box-okról pedig lejön ez:
flex-grow: 1;
2

köszönet

Blackfriar · 2014. Aug. 22. (P), 09.29
A float:left kimaradt a sidebar-ból, de különben tökéletes.
Hálás köszönet érte.
3

És az a float: left; milyen

Endyl · 2014. Aug. 22. (P), 09.33
És az a float: left; milyen célt szolgál? Nem feltétlenül értem ebben a contextusban.