如何讓兩個div並排浮動？

我一直在試圖讓兩個div浮動並排（即sliderdiv和主搜索）的一面，但不能似乎得到相同的it.`A小提琴：http://jsfiddle.net/Ar99F/1/如何讓兩個div並排浮動？

馬克 - 達

<div id="homecontent" class="container"> 
    <div id="homecontent-mid" class="row rounded"> 
     <div id="homebanner" class="rounded"> 
      <div class="sliderdiv">Content Goes Here</div> 
      <div class="main-search">Search Content Goes Here</div> 
     </div> 
    </div> 
</div>

CSS

#homecontent { 
    background: url("images/content-bg.png") repeat-x scroll 0 0 #FAFAFA; 
    position: relative; 
} 

#homecontent-mid { 
    background: url("images/bg-stage.png") repeat-y scroll right top #FFFFFF; 
    border: 1px solid #BDBCBD; 
    min-height: 100%; 
    outline: medium none; 
    top: -40px; 
} 

#homebanner { 
    background: url("images/bg-stage-shade.png") repeat-x scroll 0 0 transparent; 
    padding-right: 20px; 
    position: relative; 
} 

.rounded { 
    border-radius: 10px 10px 10px 10px; 
} 

.sliderdiv { 
    background: none repeat scroll 0 0 red; 
    float: right; 
} 

.main-search { 
    background: none repeat scroll 0 0 #FFFFFF; 
    border: medium solid #D51386; 
    clear: both; 
    float: left; 
    overflow: hidden; 
    padding: 20px 10px; 
}

請幫助

來源

2013-08-30 user2725936

http://stackoverflow.com/questions/2716955/css-layout-aligning-two-divs-side-by-side – schlagi123

http://jsfiddle.net/Vinay199129/CbCKM/ – Rex

看一看here。只需將float: left添加到他們並刪除clear: both。

來源

2013-08-30 11:35:43 adarshr

請注意，容器仍然崩潰，爲'＃homecontent'添加'overflow：hidden;'也是如此 - http://jsfiddle.net/Ar99F/5/ – Adrift

哇太簡單了..感謝很多..我覺得自己像一個白癡。謝謝 – user2725936

喜歡這個

DEMO

CSS

#homecontent { 
    background: url("images/content-bg.png") repeat-x scroll 0 0 #FAFAFA; 
    position: relative; 
} 
#homecontent-mid { 
    background: url("images/bg-stage.png") repeat-y scroll right top #FFFFFF; 
    border: 1px solid #BDBCBD; 
    min-height: 100%; 
    outline: medium none; 
    top: -40px; 
    display:table; 
} 
#homebanner { 
    background: url("images/bg-stage-shade.png") repeat-x scroll 0 0 transparent; 
    padding-right: 20px; 
    position: relative; 

} 
.rounded { 
    border-radius: 10px 10px 10px 10px; 
} 
.sliderdiv { 
    background: none repeat scroll 0 0 red; 

    display:table-cell; 
} 
.main-search { 
    background: none repeat scroll 0 0 #FFFFFF; 
    border: medium solid #D51386; 
    clear: both; 
    display:table-cell; 
    overflow: hidden; 
    padding: 20px 10px; 
}

來源

2013-08-30 11:40:13 falguni

添加overflow:hidden到您的包裝，以滿足設計和刪除clear:both;，你將需要把float:left只是第一物品不能同時使用

UPDATED FIDDLE

來源

2013-08-30 11:44:20

如何讓兩個div並排浮動？

回答

相關問題