div 如何控制响应速度

Question

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

我想在一行中最多显示 4 个 div，我现在正在这样做。我想要的是，如果有一个 div，它的宽度应该是 100%。如果两个 divs，它应该是 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

弹性框

您的 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 */

并在 .container 上设置 display:flex。

.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

一个jquery解决方案，如果你愿意使用jquery

$(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 + '%');
        });
    };
});

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

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

Answer 3

这也可以在没有 flexbox 的情况下使用 display: table 和 display: table-cell

实现

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

div 如何控制响应速度

How can div with be controlled with responsiveness

html

css

responsiveness