如何根據幀大小定位div位置？

Question

在正常窗口中，水平排列<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>

這樣安排，它們總是水平地佈置。

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

編輯：

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

編輯

，如果你打算讓你要知道什麼是其中從什麼每個箱子的高度可變組件的所有箱子等高我可以看到的是文字。

你可以做，通過固定的高度處理這個問題：

.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

當你添加「寬度」和「浮動」，將校正浮動：

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

從您的box元素中刪除「width」和「display：inline-block」屬性。

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

沒有必要給一個索引框類，如果他們都是相似的。只需使用「框」。