我使用twitter bootstrap 3来设计一个布局,它有两列,一个浮动侧边栏和一个相对于侧边栏大小有左边距的主内容,但当我在主内容内的ul元素中使用clearfix类时,清理侧边栏(浮动清除)并向下推ul和后续内容。
参见http://bootply.com/97603
HTML
<aside id="sidebar">
<h1>Search Items</h1>
<form id="searchForm">
<div class="form-group">
<label for="category">Category</label>
<select name="category" id="category" class="form-control">
<option value="">Choose</option>
<option value="1">Category 1</option>
<option value="2">Category 2</option>
<option value="3">Category 3</option>
</select>
</div>
<div class="form-group">
<label for="term">Search Term</label>
<input type="text" name="term" id="term" class="form-control"/>
</div>
<div class="text-center">
<button class="btn btn-default">Search</button>
</div>
</form>
CSS
body{
background: #F7F5FA;
overflow-x: hidden;
}
.container-full {
margin: 0 auto;
width: 100%;
padding: 0 15px;
}
#sidebar{
float: left;
width: 260px;
position: relative;
background: #ddd;
display: block
}
#sidebar #searchForm{
padding: 10px;
}
#main-content{
margin: 0px 0px 0px 260px;
background: #FFF;
position: relative;
min-height: 600px;
width: auto;
}
.gallery ul{
background: black;
}
.gallery li{
float: left;
width: 120px;
height: 120px;
padding: 5px;
background: #ddd;
}
.gallery li a{
display: block;
}
如何修复此行为?
将此类添加到您的CSS:
.row{
overflow:hidden;
}
演示
这是因为您的aside
,您将固定宽度设置为aside
,并将边距设置为main-content
,这不是并排放置元素的正确方式。但如果您对aside
和main-content
使用百分比宽度,并使用float
,则看起来不错,并且不需要overflow:hidden
(或auto)。
看看这个:
演示
#sidebar{
float: left;
width: 20%; /* instead 260px */
position: relative;
background: #ddd;
display: block
}
#main-content{
background: #FFF;
position: relative;
min-height: 600px;
width: 80%; /* instead auto */
float:left; /* added */
}
#main-content {
background: none repeat scroll 0 0 #FFFFFF;
margin: 0 0 0 260px;
min-height: 600px;
position: relative;
width: auto;
}
改变职位:相对于职位:绝对在上面的id中,你的问题会得到解决。。