Question

我正在尝试构建一个简单的响应式双列模板，并且当宽度减小到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 &copy;copyright 2018 </footer>
</body>

Answer 1

问题在于您在px中提供了保证金，但您的宽度位于% ...因此请尝试在{{1}中使用保证金left和right喜欢

或者我推荐使用main section { float:left; margin: 5px 1%; width: 48%; text-align: justify; box-sizing: border-box; }代替padding并将margin应用于width:50%

的其他解决方案

main section

<强> Updated Codepen

Answer 2

您需要更改保证金：5px 1％;

main section{
  float:left;
  width:48%;
  margin: 5px 1%;
  text-align:justify;
}

宽度：在某些屏幕中为100％，边距10px超过1％所以

响应css两列取消浮动左

2 个答案: