如何根据框架大小定位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或者如果您不想在本节中使用引导网格并构建自己的网格

.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;
}

修改

如果您打算在所有方框中具有相同的高度，您必须知道每个方框中可更改的高度组件是什么，而我可以看到的是文本。

你可以通过修正它的高度来处理这个问题：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

当你添加“width”和“float”时，它会纠正浮动：

@media screen and (max-width: 450px) {/*your code*/}

你需要一个固定宽度的盒子（或至少一个最小宽度）

Answer 3

让CSS网格处理布局。 在“blocks”div中添加一个带有“row”类的div。

从框元素中删除“width”和“display：inline-block”属性。

请RTFM：http://getbootstrap.com/css/#grid

如果它们都相似，则无需为盒子类提供索引。只需使用“盒子”。