Question

我在父div中有多个孩子div。它可能是最小2到最大8.我已将儿童div的宽度保持25％。问题是，如果有2个或3个孩子div，则父母div的前50％或75％用于显示这些div。但我想使用父级div的中心50％或75％来显示这些div。如果有超过4个子div s，那么我想显示父行的第一行而不做任何更改，并希望使用居中的25％作为第5 div，集中50％为第5和第6和第5，第6和第7分区的中心为75％。

HTML：

<div class="container">
    <p>Block1</p>
    <div class="banner">
        <div class="block1">
            <img src="hoels.png" />
            <p>Banquet Halls</p>
        </div>
        <div class="block1">
            <img src="hoels.png" />
            <p>Resorts</p>
        </div>
        <div class="block1">
            <img src="hoels.png" />
            <p>Hotels</p>
        </div>
        ---------------------------
        ---------------------------
        ---------------------------
    </div>
</div>

CSS：

.container{
    width:100%;
    margin:0 auto;
    max-width:991px;
}
.banner{
    padding:20px;
}
.block1{
    float:left;
    width:33%;
    text-align:center;
}
.block1 img{
    width:100%;
max-width:100px;
}

小提琴： https://jsfiddle.net/7fpt4m5e/2/

Answer 1

方法＃01（使用Flexbox）：

您可以使用css3 flexbox。在父元素上添加以下css：

.banner {
  justify-content: center;
  flex-wrap: wrap;
  display: flex;
}

注意 ：您需要从子元素中删除float，与flexbox一样，这是不必要的。

＆＃13;

.container{
  width:100%;
  margin:0 auto;
  max-width:991px;
}
.banner{
  justify-content: center;
  flex-wrap: wrap;
  display: flex;
  padding:20px;
}
.block1{
  background: green;
  width:25%;
  text-align:center;
}
.block1 img{
  width:100%;
  max-width:100px;
}

＆＃13;

<div class="container">
  <p>Block1</p>
  <div class="banner">
    <div class="block1">
      <img src="hoels.png" />
      <p>Banquet Halls</p>
    </div>
    <div class="block1">
      <img src="hoels.png" />
      <p>Resorts</p>
    </div>
    <div class="block1">
      <img src="hoels.png" />
      <p>Hotels</p>
    </div>
    <div class="block1">
      <img src="hoels.png" />
      <p>Farm Houses</p>
    </div>
    <div class="block1">
      <img src="hoels.png" />
      <p>Farm Houses</p>
    </div>
    <div class="block1">
      <img src="hoels.png" />
      <p>Farm Houses</p>
    </div>
  </div>
</div>

＆＃13;

方法＃02（没有Flexbox）：

您可以对子元素使用display: inline-block。我们可以使用inline中心属性影响inline-block和text-align元素，因此我们将使用此技巧将子元素居中对齐。

添加以下css：

/* Following css should be added on parent */
.banner {
  text-align: center;
  letter-spacing: -4px;
  font-size: 0;
}
/* Following css should be added on child elements */
.block1{
  letter-spacing: 0;
  font-size: 14px;
  width:25%;
  display: inline-block;
  vertical-align: top;
}

＆＃13;

.container{
  width:100%;
  margin:0 auto;
  max-width:991px;
}
.banner{
  text-align: center;
  letter-spacing: -4px;
  font-size: 0;
  padding:20px;
}
.block1{
  letter-spacing: 0;
  background: green;
  font-size: 14px;
  width:25%;
  text-align:center;
  display: inline-block;
  vertical-align: top;
}
.block1 img{
  width:100%;
  max-width:100px;
}

＆＃13;

<div class="container">
  <p>Block1</p>
  <div class="banner">
    <div class="block1">
      <img src="hoels.png" />
      <p>Banquet Halls</p>
    </div>
    <div class="block1">
      <img src="hoels.png" />
      <p>Resorts</p>
    </div>
    <div class="block1">
      <img src="hoels.png" />
      <p>Hotels</p>
    </div>
    <div class="block1">
      <img src="hoels.png" />
      <p>Farm Houses</p>
    </div>
    <div class="block1">
      <img src="hoels.png" />
      <p>Farm Houses</p>
    </div>
    <div class="block1">
      <img src="hoels.png" />
      <p>Farm Houses</p>
    </div>
  </div>
</div>

＆＃13;

父级正在使用
font-size和letter-spacing属性和子元素，以消除由inline-block引起的多余空间。有关删除此空间的更多方法，请查看此Question

根据内容

1 个答案: