1. Tudásbázis
  2. Sminkek
  3. Float-olt elemek egymás alá rendezése

Float-olt elemek egymás alá rendezése

Beküldte ipeto - 2013. május 18. 08.44
ipeto képe

Sziasztok!

Szinte biztos, hogy valami apróságot néztem el, de a következőt nem sikerül megvalósítani: A holnap fejlécében jobb oldalon egymás alatt kell szerepelni egy zászlós nyelvválasztó blokknak és a keresőmezőnek. Mindez egy AdaptiveTheme-re alapozott sminkben Ez html-ben így néz ki:

  1. <div class="region region-header">
  2.   <div class="region-inner clearfix">
  3.     <section id="block-block-1" class="block block-block contextual-links-region">
  4.       <div class="block-inner clearfix">
  5.     </section>
  6.   <div id="block-search-form" class="block block-search contextual-links-region no-title" role="search">
  7.     <div class="block-inner clearfix">
  8.     </div>
  9.   </div>
  10. </div>

Mindkét blokk css-ében szerepel a float:right; A gond ott van, hogy mindenáron egymás mellett akarnak megjelenni. Ezt azért nem értem, mert mindkét blokkban szerepel a clearfix osztály is, és ha jól értem, ennek kellene kivédeni az egymás mellé float-olást.

Drupal verzió: 
7.x
Fórum: 
Sminkek
duc-sai képe

Beküldte duc-sai - 2013. május 18. 18.04

Mindkét div-hez tartozó css-be tedd be ezt: clear:both;
Kicsit fel kellett frissítenem nekem is ezt:
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-color
oldalra másold be először ezt:

<head>
<style>
#contain {width:300px; height:200px; margin-top:50px; 
margin-left:auto; margin-right:auto; background:#ccc;}
#a {width:50px; height:50px; margin:20px; background:#ff0000; float:right;}
#b {width:50px; height:50px; margin:20px; background:#0000ff; float:right;}
</style>
</head>
<body>
<div id="contain">
 <div id="a">&nbsp;</div>
 <div id="b">&nbsp;</div>
</div>
</body>

A két div egy sorba került. Most másold be ezt, kiegészítettem a clear:both; -al: 

<head>
<style>
#contain {width:300px; height:200px; margin-top:50px; 
margin-left:auto; margin-right:auto; background:#ccc;}
#a {width:50px; height:50px; margin:20px; background:#ff0000; float:right; clear:both;}
#b {width:50px; height:50px; margin:20px; background:#0000ff; float:right; clear:both;}
</style>
</head>
<body>
<div id="contain">
 <div id="a">&nbsp;</div>
 <div id="b">&nbsp;</div>
</div>
</body>

A két div egymás alá került.
1
0
ipeto képe

Beküldte ipeto - 2013. május 18. 18.27

Köszi, valóban így jó lett.
Engem az zavar, hogy ha jól tudom, a clearfix osztálynak is meg kellene ugyanezt tennie. De lényeg, hogy megjavult.

0
0
duc-sai képe

Beküldte duc-sai - 2013. május 18. 19.05

Közben rájöttem, hogy elég csak a második div-nek megadni a clear:both-ot. (A clearfix osztályt még nem használtam, most néztem utána...)
Nálad azért nem működött a dolog, mert éppen a block-search-form div-hez tartozó class-ok nem tartalmazzák a clearfix-et...ha jól látom.

0
0
ipeto képe

Beküldte ipeto - 2013. május 19. 20.26

igen, alighanem ez lehet az oka

0
0