Question

我对我的问题可能多余的性质表示道歉，但我是新手，所以理解其他人的帖子令人困惑！

我有两个div，我在一个彼此相邻的包装器中漂浮，但是当它达到平板电脑或手机大小时，我希望它们堆叠而不是。到目前为止，这是我对这两个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。当窗口宽度为790px或更小时，此示例将两个元素一个堆叠在另一个上面。

#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" />

Answer 2

您可以使用媒体查询轻松实现此目的：

@media only screen and (max-width: 500px) {
   #story-two, #story-one {
           float: none;
           clear:both;}
            }
}

（检查最大宽度为500px的设备）

我建议您使用更多媒体查询来充分发挥行为或使用引导程序或骨架。

安德烈

Answer 3

您只需将此media query添加到您的代码中：

@media screen and (max-width:500px) {
 #story-one, #story-two{
   width: 100%;
 }
}

因此，当屏幕小于500px时，两个div将等于屏幕width的100％，并且将高于另一个。

＆＃13;

#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 screen and (max-width:500px) {
  
 #story-one, #story-two{
   width: 100%;
 }
}

＆＃13;

<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>

＆＃13;

Answer 4

我使用min-width。

#story-wrapper {
    width: auto;
    margin: auto;
    overflow: auto; /* add this to contain floated children */
}
#story-one {
    width: 100%;
}
#story-two {
    width: 100%;
}
@media screen and (min-width: 720px) {
	#story-one {
      width: 40%;
      float: left;
	}
	#story-two {
	    width: 40%;
	    float: right;
	}
}

Answer 5

如果您不想使用@media查询，但是您知道bloc的最小宽度和可接受宽度，则可以使用min-width CSS属性来获取所需内容。

此外，不要忘记考虑display : inline-block，否则你不会有这种堆叠效应，因为你的div表现为display : inline，这会阻止这个元素与其他元素堆叠。

请参阅以下示例：

Editable JSFiddle

<强> 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>

<强> CSS

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

当屏幕变小时，如何让divs彼此相邻堆叠

5 个答案: