0

我目前正在为自己创建一个通用的响应式模板，因为到目前为止我还没有真正接触到设计的这一面。

将大小调整到大约 600 像素时，我的“Content Div”出现问题（当问题所在的分辨率正确时，会出现红色边框）。即使我设置了 2300px 的静态高度，我的内容 div 也不会再展开，所以内容只是漂浮在外面，内容 div 不会展开。

 @media only screen   
and (max-width : 603px) {  


/* Styles */  
#column_wrapper img {margin-left:25.33%;padding-right: 20%;}
#column1_content{height:500px;}
#column2_content{height:500px;}
#column3_content{height:500px;}
#column_wrapper{border:1px solid red;height:300px;float: left;}
#content{height:2300px;margin-top: 100px;margin-bottom: 20%;}

}

该网站可以在响应模板中找到

4

3 回答 3

2

当浮动元素位于容器框内时会出现问题，该元素不会自动强制容器的高度调整为浮动元素。当一个元素浮动时，其父元素不再包含它，因为浮动已从流中移除。

您不需要为 div#content 使用 clearfix 指定高度。这将解决它;）

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

 html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}
于 2012-12-11T17:21:09.167 回答
0

不要在 div#content 中使用静态高度，只使用溢出：隐藏；并删除#column1_content、#column2_content 和#column3_content 中的静态高度

相关：http ://www.quirksmode.org/css/clearing.html

于 2012-12-11T17:14:45.513 回答
0

这是因为里面的元素是浮动的。当您浮动一个元素时，它会将该元素从内容流中取出。这意味着这些元素不会推出 div 并使用内容扩展它。

于 2012-12-11T17:16:52.463 回答