Hogy tudnám így elhelyezni a div-eket?
válasza:A weboldalakat lehtöbször "container"-be rakjuk...
<div id="container">
<div id="div2"></div>
<div id="div1"></div>
<div id="div3"></div>
</div>
A CSS pedig:
#div2 {
float:right;
height:auto; /* a magassága a benne lévő tartalomhoz igazodik */
min-height:400px; /*egy minimális magasságot nem árt megadni, hogy ezért rendesen nézzen ki, és ne essen szét az oldal.de nem kötelező */
}
#div1 {
float:left;
}
#div3 {
float:left;
}
containerbe van.
így azt kaptam hogy mind 3 div egymás alá került.
div 2
div 1
div 3
de megcsináltam ugyanezt egy új kóddal amin csak ezek a beállítások vannak és úgy jó volt.
ez a css kódom:
#div2 {
width: 630px;
height: auto;
float: right;
margin: 10px;
margin-top: 0;
padding: 0;
}
#container {
background: #FFE4C4;
width: 942px;
border: 1px solid grey;
height: auto;
position: relative;
overflow: auto;
margin-left: 160px;
padding: 0;
}
#div1 {
-moz-box-shadow: 5px 5px 5px grey;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
width: 270px;
height: auto;
float: left;
margin: 10px;
margin-top: 0;
margin-bottom: 30px;
padding: 0;
}
#div3 {
-moz-box-shadow: 5px 5px 5px grey;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
clear: both;
height: 470px;
width: 270px;
float: left;
margin-left: 10px;
border-top: 4px solid #78513F;
}
válasza:nincs kedvem végigolvasni a kódodat, a lényeg: ha úsztatsz valamit, akkor használnod kell a mezőkiürítést, abban a div-ben, ami az úsztatott div-eket tartalmazza.
{clear: both;} - mezőkiürítés mindkét irányban {clear: left;} - mezőkiürítés balra{clear: right;} - mezőkiürítés jobbra a stíluslapon a megfelelő div szakaszban.
w3c.org és ott ki is próbálhatod online.
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!