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

batuman 发表于 Dev

岩石

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

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

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

通过这种布置，它们总是水平布置。

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

编辑：

彼得·威尔逊

这取决于许多因素，因为此设计具有响应能力

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

编辑

如果您计划所有框的高度都相等，则必须知道每个框中可更改的高度部分是什么，从文本中我可以看到。

您可以通过固定其高度来处理：

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