Question

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

当调整大小到600px时，我的“Content Div”出现问题（当分辨率正确时，会出现红色边框）。我的内容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而使用height＃content use 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%;
}

Answer 2

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

Answer 3

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

响应式网站 - 调整问题？

3 个答案: