爲響應式設計在div內均勻分隔元素

我在div中有四個元素，並且希望在可用空間中均勻地分散它們。在這種情況下，哪種技術被認爲是響應式設計的最佳實踐？爲響應式設計在div內均勻分隔元素

對於每一個元素，我使用：

height: 75px; 
width: 75px; 
border-radius: 50%; 
margin-right: 20px;

JS小提琴：http://jsfiddle.net/adnanymous/9yYZJ/

來源

2013-08-17 Adnan Khan

由於您已經在使用引導，只需在該div內插入一個div.row-fluid，該div應包含四個項目。將這四個項目中的每一個包裝在div.span3中。這將自動縮放間距，直到在767px寬（bootstrap的手機尺寸）之前關閉，此時所有內容都將垂直堆疊。這樣可以避免添加額外的庫，即使沒有啓用JavaScript，需求也會運行。

<div class="row-fluid"> 
    <div class="span3">Thing1</div> 
    <div class="span3">Thing2</div> 
    <div class="span3">Thing3</div> 
    <div class="span3">Thing4</div> 
</div>

來源

2013-08-17 05:01:54 nickrak

謝謝！儘管我使用Bootstrap 3，並且在他們的文檔中發現了使用sx，sm和lg前綴。然而，您的解決方案適用於Bootstrap 2，並且可以接受。 –

Flexboxes（http://dev.w3.org/csswg/css-flexbox/）你想要做什麼，如果你可以用瀏覽器支持的當前狀態生活（http://caniuse.com/flexbox ）和需要使用供應商前綴。在你的情況下，這樣的事情：

#my-div { 
    display: -webkit-flex;   
    -webkit-flex-flow: row wrap; 
    -webkit-justify-content: flex-between; /* flush against edges */ 
    -webkit-justify-content: flex-around; /* space at left/right */ 
} 

.elt { 
    -webkit-flex: none; /* do not grow and shrink items */ 
    height: 75px; 
    width: 75px; 
    border-radius: 50%; 
    margin-right: 20px; 
}

這些是自然界的響應。肯定比一些片狀的jQuery插件更好。

來源

2013-08-17 01:45:15

爲響應式設計在div內均勻分隔元素

回答

相關問題