html - 如何根据帧大小定位div位置？

Question

在正常窗口中，<div>水平排列。一旦窗口尺寸变小，<div>垂直堆叠。它们显示在所附的图像中。

为此，我制作了积木和盒子。盒子在 block 内。

.blocks {
  display: block;
  margin: 0 auto;
  width: 85%;
  min-height: 420px;
}

.box1,
.box2,
.box3 {
  width: 33.333%;
  height: 100%;
  vertical-align: top;
  display: inline-block;
  zoom: 1;
  text-align: center;
}

.blocks .box1 img,
.blocks .box2 img,
.blocks .box3 img {
  max-width: 100%;
  height auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="blocks">
  <div class="col-sm-4 col-xs-4 box1 p_1" style="background-color: #ccffe5;">
    <h1>BOX 1</h1>
  </div>
  <div class="col-sm-4 col-xs-4 box2 p_1" style="background-color: #ffffcc;">
    <h1>BOX 2</h1>
  </div>
  <div class="col-sm-4 col-xs-4 box3 p_1" style="background-color: #ccffe5;">
    <h1>BOX 3</h1>
  </div>
</div>

按照这种排列方式，它们总是水平排列的。

如何根据窗口大小水平和垂直排列它们？

编辑:

Answer 1

这取决于很多因素，因为此设计是响应式

<强>1。容器宽度

-- 在大屏幕上 lg >= 1200px容器宽度为 1170px
-- 在中等屏幕上 md >= 992px容器宽度为 970px
-- 在小屏幕上 sm >= 786px容器宽度为 750px
-- 在超小屏幕上 xs < 768px容器宽度为 auto

<强>2。列宽

列宽根据容器宽度计算(每个容器行 12 列)
这意味着列宽将在每个屏幕尺寸上发生变化

在超小屏幕上，容器是自动宽度的，这意味着它将是设备宽度的 100%，所以如果您需要在超小屏幕上控制宽度，您必须手动控制

你可以使用max-width或者如果你不想在本节中使用 Bootstrap 网格并构建你自己的网格

.blocks{
    width:100%;
    display:block;
    text-align:center;
 },
 [class*='box']{
    display:inline-block;
    width:200px;
}

或

 .blocks{
    width:100%;
 },
 .blocks:after{
    display:table;
    content:"";
    clear:both;
 }
 [class*='box']{
    float:left;
    width:200px;
}

编辑

如果你计划让所有盒子的高度相同，你必须知道每个盒子中的可变高度组件是什么，这是我所看到的文本。

你可以通过固定它的高度来处理这个问题:

.blocks{
    width:100%;
    display:block;
    text-align:center;
 }
[class*='box']{
    display:inline-block;
    width:200px;
  vertical-align:top;
  height: 520px;
}
[class*='box'] p{
    height: 100px;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 180px;
    text-align: center;
    margin: 0 auto 10px auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="blocks">
  <div class="box1 " style="background-color: #ccffe5;">
    <img src='https://placehold.it/200x300'/>
    <h1>BOX 1</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
    <a href="#">Read More</a>
  </div>
  <div class="box2 " style="background-color: #ffffcc;">
    <img src='https://placehold.it/200x300'/>
    <h1>BOX 2</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <a href="#">Read More</a>
  </div>
  <div class="box3 " style="background-color: #ccffe5;">
    <img src='https://placehold.it/200x300'/>
    <h1>BOX 3</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and  Lorem Ipsum hustry's standard dummy text ever since the 1500s,</p>
    <a href="#">Read More</a>
  </div>
</div>