我正在构建一个非常简单的响应式布局，并且看起来它现在正在工作，当屏幕缩小列时，尽管是块元素，但是碰撞并且我无法弄清楚为什么，有人看到错误吗？
我的HTML：
*{
margin: 0;
padding: 0;
}
html{
width: 100%;
height: 100%;
}
body{
height: 100%;
width:100%;
}
.title{
font-family: sans-serif;
font-size: 3em;
margin: 2% 0% 2% 1%;
}
.col-1{
width: 55%;
height: 100%;
float: left;
}
.col-2{
width: 45%;
height: 100%;
float: left;
}
.columnTitle{
font-size: 1.9em;
font-family: sans-serif;
margin: 4% 0% 4% 4%;;
}
.paragraph{
font-size: 1.5em;
margin: 2%;
text-align: justify;
line-height: 1.3em;
}
/*/////////////////////////////////////////////
// media queries //
/////////////////////////////////////////////*/
@media screen and (max-width: 500px){
.col-1{
display: block;
width: 100%;
}
.col-2{
display: block;
width: 100%;
}
} <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<header>
<h1 class="title">This is a Title</h1>
</header>
<section class="col-1">
<h1 class="columnTitle">This is the First Column</h1>
<p class="paragraph">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</section>
<section class="col-2">
<h1 class="columnTitle">This is the Second Column</h1>
<p class="paragraph">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</section>
</body>
</html>
答案 0 :(得分：0)
试试这个。
首先在你的CSS上添加自动清除。
.auto-clear:before, .auto-clear:after { content:" "; display:table; }
.auto-clear:after { clear:both; }
然后为浮动列添加一个主容器。这样做是为了清除浮动元素。不擅长解释，试试吧，lmao。
-
编辑：
html结构上的问题是因为你没有清除浮动元素。
-
<div class="auto-clear">
<section class="col-1">
<h1 class="columnTitle">This is the First Column</h1>
<p class="paragraph">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</section>
<section class="col-2">
<h1 class="columnTitle">This is the Second Column</h1>
<p class="paragraph">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</section>
</div>
解决方案2：
在css文件中添加一个类。
.clear { clear:both; }
然后将2个浮动元素放入容器中。在最后一个浮动元素的底部，添加一个具有clear类的空div。它的作用是相同的，它清除你的浮动元素。但是以凌乱的方式。你正在创造不必要的div。所以最好的方法是我给你的第一个解决方案。 （对我来说至少）
<div>
<section class="col-1">
<h1 class="columnTitle">This is the First Column</h1>
<p class="paragraph">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</section>
<section class="col-2">
<h1 class="columnTitle">This is the Second Column</h1>
<p class="paragraph">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</section>
<div class="clear"></div>
</div>