响应式网站-调整问题？

Question

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

当我将大小调整到600px左右时，我的“内容栏”出现了一个问题(当问题所在的分辨率正确时，会出现一个红色边框)。我的内容div将不再扩展，即使我设置了2300px的静态高度，所以内容只是浮动在外面，并且内容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%;}

} 

该网站网址为Responsive Template。

Answer 1

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

你不需要给出高度，而是使用div#content。这将修复它;)

.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%;
}

Answer 2

不要在div#content中使用静态高度，只能使用overflow:hidden；并且在#column1_content、#column2_content和#column3_content中也要删除静态高度

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

Answer 3

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