Question

大家好我想均匀分配图的盒子。最好的方法是什么？

#centreContent {
  margin-left: auto;
  margin-right: auto;
  padding: 100px;
  margin-top: 150px;
  width: 70%;

  /* border: 1px solid black; */
}

figure{
    font-size: 12px;
    float: left;
    border: 1px solid black;
    padding: 20px;
    margin: 5px;
    text-align: center;
    width: 200px;
    height: 250px;
    overflow:hidden;
    -webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;border:3px solid #ADADAD;background-color:#D4D4D4;-webkit-box-shadow: #FFFFFF 2px 2px 2px;-moz-box-shadow: #FFFFFF 2px 2px 2px; box-shadow: #FFFFFF 2px 2px 2px;
}

有无数的数字...基本上......我希望它们都有相等的间距。

<div id="centreContent">
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
</div>

Answer 1

我建议使用grid 960系统或类似的东西。网格960使用12列网格行布局，均匀分布直接div。这非常灵活，因为您可以使用许多不同的组合。它实现了你所追求的。希望这会有所帮助。

<强> CSS：

.container_12{width:98%;margin-left:1%;margin-right:1%;}
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{display:inline;float:left;position:relative;margin-left:1%;margin-right:1%;}    
    .container_12 .grid_1{width:6.333%;}
    .container_12 .grid_2{width:14.667%;}
    .container_12 .grid_3{width:23%;}
    .container_12 .grid_4{width:31.333%;}
    .container_12 .grid_5{width:39.667%;}
    .container_12 .grid_6{width:48%;}
    .container_12 .grid_7{width:56.333%;}
    .container_12 .grid_8{width:64.667%;}
    .container_12 .grid_9{width:73%;}
    .container_12 .grid_10{width:81.333%;}
    .container_12 .grid_11{width:89.667%;}
    .container_12 .grid_12{width:100%!important;margin-left:0!important;margin-right:0!important; }

<强>标记：

<div class="container_12">
  <div class="grid_6"></div>
  <div class="grid_6"></div>
</div>


<div class="container_12">
  <div class="grid_4"></div>
  <div class="grid_4"></div>
  <div class="grid_4"></div>
</div>


<div class="container_12">
  <div class="grid_3"></div>
  <div class="grid_3"></div>
  <div class="grid_3"></div>
  <div class="grid_3"></div>
</div>

修改

关于你上一篇文章的编辑，如果你不知道提前的数字，你将无法通过纯CSS解决方案实现这一点，你可能需要一些JavaScript来重新计算宽度每个div基于div的总数。

Answer 2

我让它使用内联块...

#centreContent {
  margin-left: auto;
  margin-right: auto;
  padding: 100px;
  margin-top: 150px;
  width: 70%;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
  /* border: 1px solid black; */
}

figure{
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
    font-size: 12px;
    border: 1px solid black;
    padding: 20px;
    margin: 5px;
    text-align: center;
    width: 200px;
    height: 250px;
    overflow:hidden;
    -webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;border:3px solid #ADADAD;background-color:#D4D4D4;-webkit-box-shadow: #FFFFFF 2px 2px 2px;-moz-box-shadow: #FFFFFF 2px 2px 2px; box-shadow: #FFFFFF 2px 2px 2px;
}

如何在CSS中均匀分布？

2 个答案: