html - 当屏幕变小时如何让div彼此相邻堆叠

Question

对于我的问题可能多余的性质，我深表歉意，但我是新手，所以很难理解其他人的帖子!

我有两个 div，它们漂浮在一个 wrapper 内，彼此相邻，但当它达到平板电脑或手机大小时，我希望它们堆叠起来。到目前为止，这是我对这两个 div 及其包装器的 css 的了解:

#story-wrapper {
    width: auto;
    margin: auto;
    overflow: auto; /* add this to contain floated children */
}
#story-one {
    width: 40%;
    float: left;
}
#story-two {
    width: 40%;
    float: right;
}

这是我的 HTML 中的内容:

<div id="story-wrapper">
    <div id="story-one">
        <h2>Story #1</h2>
        <img class="small-story-image" src="images/sample-1.jpg">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus, nisl id molestie cursus, mauris ipsum consectetur nibh, vel sagittis nisi est eleifend magna.</p>
        <p><a class="button" href="#" target="_blank">Button Text</a></p>
    </div>
    <div id="story-two">
        <h2>Story #2</h2>
        <img class="small-story-image" src="images/sample-2.jpg">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus, nisl id molestie cursus, mauris ipsum consectetur nibh, vel sagittis nisi est eleifend magna.</p>
        <p><a class="button" href="#" target="_blank">Button Text</a></p>
    </div>
</div>

在我拔头发之前，你能帮帮我吗？我不会看起来很可爱。

Answer 1

您想使用 media queries .使用类似的东西，您可以针对不同的窗口宽度修改您的 CSS。当窗口宽度为 790 像素或更小时，此示例会将两个元素一个堆叠在另一个之上。

#story-wrapper {
  width: auto;
  margin: auto;
  overflow: auto; /* add this to contain floated children */
}
#story-one {
  width: 40%;
  float: left;
}
#story-two {
  width: 40%;
  float: right;
}

@media(max-width:790px) {
  #story-one, #story-two {
    float:none;
    display:block;
    width:100%;
  }
}

<div id="story-wrapper">
  <div id="story-one">
    <h2>Story #1</h2>
    <img class="small-story-image" src="images/sample-1.jpg">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus, nisl id molestie cursus, mauris ipsum consectetur nibh, vel sagittis nisi est eleifend magna.</p>
    <p><a class="button" href="#" target="_blank">Button Text</a></p>
  </div>

  <div id="story-two">
    <h2>Story #2</h2>
    <img class="small-story-image" src="images/sample-2.jpg">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus, nisl id molestie cursus, mauris ipsum consectetur nibh, vel sagittis nisi est eleifend magna.</p>
    <p><a class="button" href="#" target="_blank">Button Text</a></p>
  </div>
</div>

或者，您可以为不同的窗口宽度使用完全独立的样式表。

<link rel="stylesheet" media="(max-width: 800px)" href="tablet.css" />