根据内容更改父div的宽度

I have number of of child divs in a parent div. It may be minimum 2 to maximum 8. I have kept the width of child divs 25% fixed. The problem is when there are 2 or 3 child divs, then first 50% or 75% of parent div is used to display these divs. But I want to use center 50% or 75% of parent div to display these divs. In case there are more than 4 child divs then I want to display first row of parent row without any change and want to use centered 25% for 5th div, centered 50% for 5th and 6th and centered 75% for 5th, 6th and 7th div.

我在父div中有多个子div。它可能是最小2到最大8.我保持儿童div的宽度25%固定。问题是当有2个或3个子div时,则使用父div的50%或75%来显示这些div。但我想使用50%或75%的父div显示这些div。如果有超过4个子div,那么我想显示父行的第一行没有任何变化,并且想要使用居中25%作为第5 div,居中50%作为第5和第6,并且集中75%作为第5,6和7 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;
}

Fiddle: https://jsfiddle.net/7fpt4m5e/2/

1 个解决方案

#1

Approach #01 (Using Flexbox):

方法#01(使用Flexbox):

You can use css3 flexbox. Add following css on parent element:

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

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

Note: You will need to remove float from child elements as with flexbox it is unnecessary.

注意:您需要从子元素中删除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>

Approach #02(Without Flexbox):

方法#02(没有Flexbox):

You can use display: inline-block on child elements. As we can affect inline and inline-block elements with text-align center property so we will use this trick to center align child elements.

您可以在子元素上使用display:inline-block。因为我们可以使用text-align center属性来影响内联块和内联块元素,所以我们将使用这个技巧来居中对齐子元素。

Add following css:

添加以下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 and letter-spacing properties are being used in parent and child elements to remove excess space caused by inline-block. For more ways of removing this space, check this Question

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

#1