如何根据加载样式表后才能找到的元素数量更改 CSS 属性？

Question

当有两个 div 时，我需要在第一个 div 之前留有一个左边距空间。但是当有 3 个 div 时，应该没有左边距空间。

div 的数量将是基于服务器端数据的动态内容。因此动态可以有 2 或 3 个 div。

必填：

空间 Div1 Div2

Div1 Div2 Div3

如何在一个简单的 CSS 中实现这一点？

Answer 1

您可以尝试使用容器和 flex 而不是边距

.caja{
width:100%;
display:flex;
flex-wrap:wrap;
}

.caja span{
  flex:1;
}

<div class="caja">
  <span>span1</span>
  <span>span2</span>
</div>

<div class="caja">
  <span>span1</span>
  <span>span2</span>
  <span>span3</span>
</div>

另一个选项是javascript，您可以计算元素数量，如果超过2个，添加您需要的边距或根据您的情况删除它：

$(".caja").each(function(){
  var caja = $(this).find("span").length;
  if(caja>2){
    $(this).find('span').css('margin','0');
  }
});

.caja span{
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="caja">
<span>span 1</span>
<span>span 2</span>
</div>

<div class="caja">
<span>span 1</span>
<span>span 2</span>
<span>span 3</span>
</div>

希望它有效。

Answer 2

你可以考虑css-grid:

包装这些 div 的任何东西（无论是另一个 div 还是主体）都需要 display: grid 或 display: inline-grid 的样式

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "a b c";
}

.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

.c {
  grid-area: c;
}

<h4>Two div</h4>
<div class="wrapper">
  <div class="b">Two</div>
  <div class="c">Three</div>
</div>

<h4>Three div</h4>
<div class="wrapper">
  <div class="a">One</div>
  <div class="b">Two</div>
  <div class="c">Three</div>
</div>

稍微解释一下：

当然，display: grid 设置我们允许我们的孩子排列成一个网格。

grid-template-columns: 确定我们在网格上的列的数量/大小。 1fr 是一个度量单位，类似于 100px 或 33%，但与 px 或 % 不同，fr 动态分配整体的一小部分。 （所以1fr 1fr 1fr 分配了 3 个相同大小的列，我们也可以做类似1fr 2fr 之类的事情，它将第一列分配为总宽度的 1/3，第二列分配为总宽度的 2/3）

grid-template-areas: 为我们提供了出色的组织策略。我们可以命名我们的网格位置，以使它们更容易分配什么内容去哪里。我们已将列命名为 a b 和 c。

grid-area 正是我们引用在网格中我们希望通过我们在grid-template-areas 中设置的名称呈现的位置的方式。

---

另一种选择是使用浮动对您有利

.wrapper {
  width: 100%;
  height: 50px;
}

.box{
  float: right;
  width: 33.333%;
}

<div class="wrapper">
  <div class="box">Two</div>
  <div class="box">One</div>
</div>

<div class="wrapper">
  <div class="box">Three</div>
  <div class="box">Two</div>
  <div class="box">One</div>
</div>

Answer 3

编辑：请参阅底部示例，了解与容器内任意数量的元素兼容的解决方案，该解决方案仅使用 float 和 margin 将它们居中。

很可能只使用 nth-last-of-type() 和 nth-of-type() 使用 css - 至少在最大元素数为 3 的情况下（可能能够调整 css 更多）。检查下面的示例。

解释：nth-last-of-type(2) 如果只有 2 个元素，则以第一个元素为目标，如果有 3 个元素，则以第二个元素为目标。 nth-of-type(n + 2) 定位第二个和第四个元素的所有元素，如果元素超过 2 个，则取消之前的样式。 n + 在此示例中不是必需的，但在出现更多元素时会包含在内。

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

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

CSS

.container div{
float:left;
width:30%;
height:50px;
background:red;
border:1px solid;
}
.container div:nth-last-of-type(2){
margin-left:16%;
background:blue;
}
.container div:nth-of-type(n + 2){
margin:0;
background:green;
}

示例：https://jsfiddle.net/ufzwkzvu/5/

请注意，颜色只是用来区分元素。

---

编辑： 示例适用于容器内任意数量的元素。

.floater {
  float: left;
  width: 33.33%;
  height: 50px;
  background: red;
  border: 1px solid;
  box-sizing: border-box;
}

/* The relevant css is inbetween comment below and the next */
/* Relevant css start */

.floater:nth-last-of-type(2) {
  margin-left: 16.66%;
  background: blue;
}

.floater:nth-last-of-type(1) {
  margin-left: 33.33%;
  background: blue;
}

.floater:nth-of-type(3n - 1) {
  margin: 0;
  background: green;
}

.floater:nth-of-type(3n) {
  margin: 0;
  background: green;
}

/* Relevant css end */

span.clearfix {
  clear: left;
  display:block;
}
.spacer{
  padding:20px 0;
}
.container{
  padding:20px 0;
  clear:both;
}
.container:nth-of-type(2n){
  background:#e6e6e6;
}

<div class="spacer">1 element</div>

<div class="container">
  <div class="floater"></div>
  <span class="clearfix"></span>
</div>

<div class="spacer">2 elements</div>

<div class="container">
  <div class="floater"></div>
  <div class="floater"></div>
  <span class="clearfix"></span>
</div>

<div class="spacer">3 elements</div>

<div class="container">
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <span class="clearfix"></span>
</div>

<div class="spacer">4 elements</div>

<div class="container">
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <span class="clearfix"></span>
</div>

<div class="spacer">5 elements</div>

<div class="container">
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <span class="clearfix"></span>
</div>

<div class="spacer">9 elements</div>

<div class="container">
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <span class="clearfix"></span>
</div>

<div class="spacer">10 elements</div>

<div class="container">
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <span class="clearfix"></span>
</div>

<div class="spacer">11 elements</div>

<div class="container">
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <div class="floater"></div>
  <span class="clearfix"></span>
</div>