使div彼此等距並且容器邊緣

我正在尋找具有彼此等距的div數量。我期望做的是擁有最大數量的div，它們可以並排排列，並且它們之間的距離相同。分開的距離也應該是與容器邊緣的距離。使div彼此等距並且容器邊緣

我幾乎從下面的代碼中得到我想要的（感謝這裏發現的另一篇文章），但從http://domainingarticles.com/a/可以看出，如果您調整頁面的大小，邊緣上的項目與邊上的距離保持相同。

<body> 
    <div id="container"> 
     <div class='item'><a href='#'><img src='test.png' alt='1' height='150' width='150' /></a><br />test</div> 
     <div class='item'><a href='#'><img src='test.png' alt='2' height='150' width='150' /></a><br />test</div> 
     <div class='item'><a href='#'><img src='test.png' alt='3' height='150' width='150' /></a><br />test</div> 
     <div class='item'><a href='#'><img src='test.png' alt='4' height='150' width='150' /></a><br />test</div> 
     <div class='item'><a href='#'><img src='test.png' alt='5' height='150' width='150' /></a><br />test</div> 
     <div class='item'><a href='#'><img src='test.png' alt='6' height='150' width='150' /></a><br />test</div> 
     <div class='item'><a href='#'><img src='test.png' alt='7' height='150' width='150' /></a><br />test</div> 
     <div class='item'><a href='#'><img src='test.png' alt='8' height='150' width='150' /></a><br />test</div> 
     <div class='item'><a href='#'><img src='test.png' alt='9' height='150' width='150' /></a><br />test</div> 
     <div class='item'><a href='#'><img src='test.png' alt='10' height='150' width='150' /></a><br />test</div> 
    </div> 
</body>

以下是CSS

#container { 
    text-align: justify; 
} 
#container:after{ 
    content: ''; 
    width: 100%; 
    display: inline-block; 
} 

.item { 
    text-align: center; 
    width: 200px; 
    display: inline-block; 
    box-sizing: border-box; 
    padding:25px; 
} 

.item img { 
    border-radius: 25px; 
}

任何人都可以提出，我可以實現我所期待的。請注意項目的數量是未知的，因此不能手動指定距離。

任何幫助將不勝感激。

來源

2015-10-12 Peter

取看看這個flexbox佈局看看是否有幫助。

#container { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    flex-wrap: wrap; 
 
} 
 
.item { 
 
    flex: 0 0 150px; 
 
    margin: 25px; 
 
}

<body> 
 
    <div id="container"> 
 
     <div class='item'><a href='#'><img src='test.png' alt='1' height='150' width='150' /></a><br />test</div> 
 
     <div class='item'><a href='#'><img src='test.png' alt='2' height='150' width='150' /></a><br />test</div> 
 
     <div class='item'><a href='#'><img src='test.png' alt='3' height='150' width='150' /></a><br />test</div> 
 
     <div class='item'><a href='#'><img src='test.png' alt='4' height='150' width='150' /></a><br />test</div> 
 
     <div class='item'><a href='#'><img src='test.png' alt='5' height='150' width='150' /></a><br />test</div> 
 
     <div class='item'><a href='#'><img src='test.png' alt='6' height='150' width='150' /></a><br />test</div> 
 
     <div class='item'><a href='#'><img src='test.png' alt='7' height='150' width='150' /></a><br />test</div> 
 
     <div class='item'><a href='#'><img src='test.png' alt='8' height='150' width='150' /></a><br />test</div> 
 
     <div class='item'><a href='#'><img src='test.png' alt='9' height='150' width='150' /></a><br />test</div> 
 
     <div class='item'><a href='#'><img src='test.png' alt='10' height='150' width='150' /></a><br />test</div> 
 
    </div> 
 
</body>

jsfiddle

來源

2015-10-12 20:38:00 Stickers

您可以使用Flexbox的（這是不老的瀏覽器的支持，但我認爲這是一個很好的選擇）：

CSS：

.container { 
    display: flex; 
    justify-content: space-between; 
} 

.item { 
    flex: 1 0 200px; 
}

HTML：

<div class="container"> 
    <div class="item">1</div> 
    <div class="item">2</div> 
</div>

來源

2015-10-12 20:31:37

使div彼此等距並且容器邊緣

回答

相關問題