Question

我有一个宽度为364px的div。容器内可以有一个或多个相同的div。我希望divs宽度的行为如下。

我想在一行中显示最多4个div，我现在正在做。我想要的是，如果有一个div它的宽度应该是100％。如果两个div，它应该是50 50％。如果有三个div，则每个div的宽度应为33.3％。如果是四，那么每个25％。

我该怎么做？

容器看起来像这样，

<div class="container">
    <div class="goal"></div>
</div>

或

<div class="container">
    <div class="goal"></div>
    <div class="goal"></div>
    <div class="goal"></div>
</div>

CSS如下，但我不知道如何实现这样的规则

.goal {
background: #5A8EAE;
width: 364px;
height: auto;
color: #F4F7F9;
float: left;
margin-right: 20px;
margin-bottom: 20px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

}

Answer 1

Flexbox的

你的div需要全等宽，所以你的规则是：flex: 1 0 0表明：

flex-grow: 1; /* grow to fill the available space */
flex-shrink: 0; /* can't shrink, but because the default width is 0, it doesn't need to */
flex-basis: 0; /* default width */

并在display:flex上设置.container。

.goal {
background: #5A8EAE;
width: 364px;
height: auto;
color: #F4F7F9;
float: left;
margin-right: 20px;
margin-bottom: 20px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  flex: 1 0 0;
  -ms-flex: 1 0 0;
  -webkit-flex: 1 0 0;
}

.container {
  display:flex;
  display:-ms-flex;
  display:-webkit-flex;
}

<div class="container">
    <div class="goal">1</div>
    <div class="goal">2</div>
    <div class="goal">3</div>
</div>

<div class="container">
    <div class="goal">1</div>
    <div class="goal">2</div>
</div>

<div class="container">
    <div class="goal">1</div>
</div>

Answer 2

使用display: table和display: table-cell

时，如果没有flexbox，也可以实现此目的

HTML：

<div class="wrapper">
  <div class="container">
    <div class="goal">1</div>
  </div>
  <div class="container">
    <div class="goal">1</div>
    <div class="goal">2</div>
    <div class="goal">3</div>
  </div>
  <div class="container">
    <div class="goal">1</div>
    <div class="goal">2</div>
    <div class="goal">3</div>
    <div class="goal">4</div>
  </div>
</div>

的CSS：

.wrapper {
  width: 350px;
}
.container {
  display: table;
  width: 100%;
  text-align: center;
}
.goal {
  padding: 1em;
  border: 1px solid black;
  display: table-cell;
  background: #5A8EAE;  
  color: white;
  font-family: sans-serif;
}

Codepen

Answer 3

如果你愿意使用jquery

，那就是jquery解决方案

＆＃13;

$(document).ready(function() {
    $('.add').on('click', function() {
        if ($('.goal').length < 4) {
            $('.container').append('<div class="goal">stuff here</div>');
            responsive();
        }
    });
    
    responsive();
	function responsive() {
    	var count = $('.goal').length;
        var width = parseFloat(100.00/count).toFixed(0) - 1;
        $('.goal').each(function() {
        	$(this).css('width', width + '%');
        });
    };
});

＆＃13;

.container {
    width: 364px;
    background: lightgray;
    outline: 1px solid blue;
    padding: 15px;
}
.goal {
    outline: 1px solid black;
    height: 50px;
    background: gray;
    display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="add" href="#">ADD DIV</a>

<div class="container">
    <div class="goal">stuff here</div>
</div>

＆＃13;

如何通过响应性来控制div

3 个答案: