Question

如果之前已经回答过，请道歉。

我有四个水平对齐的div，每个div都包含一个img和text。

box box box box

当我缩小屏幕尺寸时，我想让它们分开中间，给我：

box box
box box

而不是我目前得到的东西：

box box box
    box

目前，当我进一步缩小屏幕尺寸时，它们会堆叠为2x2，在非常小的屏幕上分割成垂直布局（他们仍然需要这样做）。

js fiddle here：https://jsfiddle.net/zyrkstnk/

有什么想法吗？我已经搞砸了＆amp; nbsp但是无法让它发挥作用。谢谢！

Answer 1

#homethumbs {
	width: 100%;
	text-align: center;
}

.homethumb {
	width: 300px;
}
.homethumb, .wrap {
	display: inline-block;
}

<div id="homethumbs">
    <div class="wrap">
        <div class="homethumb">
            <img src="http://placehold.it/250x250">
            <h2>Start here with the basics</h2>
        </div>
        <div class="homethumb">
            <img src="http://placehold.it/250x250">
            <h2>Start here with the basics</h2>
        </div>
    </div>
    <div class="wrap">
        <div class="homethumb">
            <img src="http://placehold.it/250x250">
            <h2>Start here with the basics</h2>
        </div>
        <div class="homethumb">
            <img src="http://placehold.it/250x250">
            <h2>Start here with the basics</h2>
        </div>
    </div>
</div>

Answer 2

你应该试试flex！

IOException

不要忘记放入视口元标记。以下是此结果的视频：http://www.screencast.com/t/lYV6tFvhn9

Answer 3

您可以将flex用于相同的设备，对于较小的设备，您可以将每个div的宽度设置为50％并设置flex-wrap：这样可以实现2 * 2网格

检查此代码段

＆＃13;

#homethumbs {
  display: flex;
}
@media (min-width: 200px) and (max-width: 1000px) {
  #homethumbs {
    flex-wrap: wrap;
    width: 100vw;
    border: 1px solid;
  }
  .homethumb {
    width: 50vw;
  }
}

＆＃13;

<div id="homethumbs">
  <div class="homethumb">
    <img src="http://placehold.it/250x250">
    <h2>Start here with the basics</h2>
  </div>





  <div class="homethumb">
    <img src="http://placehold.it/250x250">
    <h2>Start here with the basics</h2>
  </div>



  <div class="homethumb">
    <img src="http://placehold.it/250x250">
    <h2>Start here with the basics</h2>
  </div>



  <div class="homethumb">
    <img src="http://placehold.it/250x250">
    <h2>Start here with the basics</h2>
  </div>
</div>

＆＃13;

希望这有帮助

四个水平对齐的div在较小的屏幕尺寸上分成两部分

3 个答案: