Question

我希望有一些divs彼此等距离。我要做的是拥有最大数量的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;
}

任何人都可以建议我能实现我想要的目标。请注意，项目数量未知，因此无法手动指定距离。

非常感谢任何帮助。

Answer 1

看看这个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

Answer 2

您可以使用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>

使div彼此等距和容器边缘

2 个答案: