Html 如何让两个div并排浮动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18531895/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make two divs float side by side?
提问by user2725936
I have been trying to make two divs float side by side (namely sliderdiv and main-search) but cant seem to get it.`A fiddle of the same: http://jsfiddle.net/Ar99F/1/
我一直试图让两个 div 并排浮动（即滑块 div 和主搜索），但似乎无法得到它。`同样的小提琴：http: //jsfiddle.net/Ar99F/1/
Mark-up
加价
<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
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;
}
Please Help
请帮忙
回答by adarshr
回答by Ritabrata Gautam
add overflow:hiddento your wrappers to fulfill the design and remove clear:both;and you will need to put float:leftto just the first item not to both
添加overflow:hidden到您的包装器以完成设计并删除clear:both;，您将需要只放入float:left第一个项目而不是两个
回答by Falguni Panchal
Like this
像这样
CSS
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;
}
