如何通过响应来控制 div [重复]答案

【问题标题】：How can div with be controlled with responsiveness [duplicate]如何通过响应来控制 div [重复]
【发布时间】：2016-01-21 22:58:27
【问题描述】：

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

我想在一行中显示最多 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;

}

【问题讨论】：

标签： html css responsiveness

【解决方案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 */

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

【讨论】：

你能解释一下这个 flex 值吗？ 1 0 0 ?
这意味着.goal应该都从0宽度开始（第三个0）并且应该根据需要增长（第一个1），都在同一行，没有换行，制作它们都等宽。这是我找到的最好的指南，我经常参考它：css-tricks.com/snippets/css/a-guide-to-flexbox
@Shaonline 请记住，IE 10 或更低版本与display: flex caniuse.com/#search=flex 存在问题
@AGE - 它支持较旧的语法，但它完全支持 flexbox。
@Adam 同意，继续将语法添加到您的答案中......或参考链接

【解决方案2】：

这也可以在不使用 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

【讨论】：

【解决方案3】：

如果您愿意使用 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>

【讨论】：