如何根據框架大小定位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> 

Answer 2

當你添加“width”和“float”時它會修正浮點數：

.box1, .box2, .box3 {   
    width: 200px;
    float:left;     
    height: 100%;
    vertical-align: top;
    zoom: 1;

    text-align: center;
    display: inline-block;
}

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

Answer 3

讓CSS網格處理布局。 在“blocks”div中添加一個帶有“row”類的div。

從框元素中刪除“width”和“display：inline-block”屬性。

請RTFM： http ： //getbootstrap.com/css/#grid

如果它們都相似，則無需為box類提供索引。 只需使用“盒子”。