我正在尝试构建一个简单的响应式两列模板，并且当宽度减小到1000px时，这两段应该相互堆叠。但是，我意识到在屏幕尺寸减小到1000px之前，两个段落已被向左推，只有宽度的50％，然后在屏幕尺寸减小到1000px之后，这两个段落的行为正常，但是发生了什么在两者之间？我该如何解决。
Codepen Link
*,
body {
padding: 0;
margin: 0;
}
body {
width: 95%;
margin: 0 auto;
}
header {
width: 100%;
height: 3em;
color: #00;
font-family: sans-serif;
font-weight: 400;
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(0, 0, 0, .3)
}
header p {
font-size: 1.25em;
font-weight: 700;
color: #FFF;
font-family: sans-serif;
margin-left: 10px;
text-transform: uppercase;
}
header nav {
list-style: none;
margin-right: 10px;
;
}
header nav a {
text-decoration: none;
color: rgba(255, 255, 255, 1);
padding: 10px;
font-weight: 400;
text-transform: uppercase;
}
header nav a:hover {
color: blue;
text-decoration: underline;
}
main section {
float: left;
width: 48%;
margin: 5px 10px;
text-align: justify;
}
.clear {
clear: both;
}
footer {
width: 100%;
background: #eeeeee;
text-align: center;
margin-top: 10px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
color: deeppink;
}
@media (max-width:1000px) {
main section {
width: 100% !important;
float: none !important;
}
main section p {
width: 100%;
min-width: 100%;
}
}<body>
<header>
<p>Logo</p>
<nav> <a href="#">Home</a> <a href="#">Contacts</a> <a href="#">Locations</a> </nav>
</header>
<main>
<section>
<p>Biltong bresaola salami rump, ground round tongue turkey meatloaf jowl. Tail andouille doner, hamburger shoulder short ribs ham hock alcatra strip steak turducken pancetta cupim leberkas. Landjaeger venison kevin ham hock capicola, jerky ribeye
rump burgdoggen tenderloin pork. Picanha rump biltong pastrami, cupim corned beef prosciutto salami.</p>
</section>
<section>
<p>Sausage fatback cow, venison bacon shoulder boudin strip steak short loin burgdoggen picanha. Pig cow brisket pork chop. Turducken kevin ground round, beef frankfurter biltong turkey tongue pig ham hock alcatra. Pork t-bone rump venison chuck filet
mignon pork belly. Cow pork chop alcatra capicola sausage, landjaeger turkey beef pancetta. Buffalo doner pork loin, pork chop frankfurter t-bone shankle leberkas cupim sirloin tenderloin filet mignon strip steak corned beef.</p>
</section>
</main>
<div class="clear"></div>
<footer> Design & create artwork ©copyright 2018 </footer>
</body>最佳答案
问题是您在px中提供了边距，但宽度在%中...因此，请尝试在left中使用边距right和%
main section {
float:left;
margin: 5px 1%;
width: 48%;
text-align: justify;
box-sizing: border-box;
}
否则，我建议使用
padding而不是margin并将width:50%应用于main sectionmain section {
float:left;
width: 50%;
text-align: justify;
padding: 5px 10px;
box-sizing: border-box;
}
Updated Codepen
关于html - 响应式CSS两列取消向左 float ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49206105/