Html 如何使两个div并排浮动?
我一直试图让两个div并排浮动(即sliderdiv和main search),但似乎无法实现 加价Html 如何使两个div并排浮动?,html,css,Html,Css,我一直试图让两个div并排浮动(即sliderdiv和main search),但似乎无法实现 加价 <div id="homecontent" class="container"> <div id="homecontent-mid" class="row rounded"> <div id="homebanner" class="rounded"> <div class="sliderdiv">Co
<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>
请帮我看看。
只需将float:left
放在它们两个上,然后像这样删除clear:all
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;
}
#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;
}
将
overflow:hidden
添加到包装器中以实现设计,并删除clear:两者
并且您需要将float:left
放在第一项中,而不是放在两项中
注意,容器仍处于折叠状态,添加
溢出:隐藏代码>至#家庭内容
-