根据内容更改父div的宽度

Question

我div父母有很多孩子div.它可能是最小2到最大8.我保持儿童div的宽度25%固定.问题是当有2个或3个孩子时div,则先用50%或75%的父母div来显示这些divs.但是我想用50%或75%的父母div来显示这些divs.如果有超过4个孩子div的话,我想显示父行的第一行没有任何变化,并且想要使用居中的25%为5 div,居中50%为第5和第6,居中75%为第5,6和7th div .

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它是不必要的.

.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;
}

<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>

方法#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;
}

.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;
}

<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>

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