在 wrapper-div 内对齐 content-div 元素答案

【问题标题】：align content-div element inside of wrapper-div在 wrapper-div 内对齐 content-div 元素
【发布时间】：2016-03-16 10:47:11
【问题描述】：

我一直在努力仅使用具有以下限制的 CSS 来对齐 wrapper-div 的 content-div 元素。

包装器 div 可以有一行，该行允许多个 content-div 元素在该行上
包装 div 的一行最多可以存在 4 个 content-div 元素。
最后一行的Content-div 元素必须展开以填满该行。（例如，如果最后一行存在 3 个 content-div 元素，则每个 content-div 的宽度应为 33.3%）
一个且只有一个内容元素总是被选中，并且被选中的元素应该是 wrapper-div 元素的左下角。

为了解决这个问题，我尝试了以下 css。

.wrapper{
  width:100%;
}
.content{
   max-width:100%;
   min-width:25%;
   background-color:white;
   float:right;
}
.content.selected{
   position:absolute;
   top:100%;
   left:0;
   float:left;
   background-color:yellow;
}

我认为“float:right;float:left position:absolute;top:100%;left:0;”选项可以处理限制 1 和限制 4，“min-width:25%”选项可以处理限制 2，“max-width:100%”选项可以处理限制 3。但是，只有少数限制得到满足通过 CSS。

我已经设置了 jsFiddle 示例： https://jsfiddle.net/6qyc5kLw/2/

我会在这方面提供帮助。

This image is what I want to do.

【问题讨论】：

谢谢大家！我已经完全解决了这个问题。我真的很感激！

标签： html css

【解决方案1】：

曾经考虑过 display:flex 吗？它超大！

.wrapper{
  width:100%;
  position:relative;
  display: flex;
  flex-flow:row wrap;
  align-items: stretch;
}
.content{

   min-width:25%;
   background-color:white;
   //float:right;
   flex:1;

   order:1;
}
.content.selected{
   //position:absolute;
   //top:100%;
   //left:0;
   //float:left;
   background-color:yellow;
   order:-1;
}

【讨论】：

【解决方案2】：

新的flexbox 可能性肯定是您正在寻找的。请参阅下面的 sn-p 或 https://jsfiddle.net/6qyc5kLw/3/ 以获取具有一些基本 flexbox 属性的更新演示。一个额外的将是

flex-order (to reverse the order of elements in first row)

    .wrapper{
      width:100%;
      position:relative;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .content{
       flex-basis: 25%;
       background-color:white;
       border: 1px solid #ccc;
       flex-grow: 1;
       box-sizing: border-box;
    }
    .content.selected{
       align-self: flex-end;
       background-color:yellow;
    }

<body>
  <div class="wrapper">
    <div class="content">
        1
    </div>
    <div class="content">
        2
    </div>
    <div class="content">
        3
    </div>
    <div class="content">
        4
    </div>
    <div class="content selected">
        5
    </div>
    <div class="content">
        6
    </div>
    <div class="content">
        7
    </div>
  </div>
</body>

【讨论】：

【解决方案3】：

你可以使用 display: flex

.wrapper{
  width:100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.content{
  background:#fff;
  box-flex: 1;
  min-width:25%;
  flex: 1;
  margin: auto;
}
.content.selected{
  background-color:yellow;
}

<div class="wrapper">
  <div class="content">1</div>
  <div class="content">2</div>
  <div class="content">3</div>
  <div class="content">4</div>
  <div class="content selected">5</div>
  <div class="content">6</div>
  <div class="content">7</div>
</div>

【讨论】：

【解决方案4】：

这正是您想要的示例图片：

    .wrapper{
      width:100%;
      position:relative;
    }
    .content{
       max-width:100%;
       min-width:25%;
       background-color:white;
       float:right;
       border: 1px solid black;
       box-sizing: border-box;
    }
    .content.selected{
       background-color:yellow;
       float: left;
       width: 33.33%;
    }

.content:nth-child(6) {
    float: right;
    width: 33.33%;
}

.content:nth-child(7) {
    float: left;
    width: 33.33%;
}

<body>
  <div class="wrapper">
    <div class="content">
        1
    </div>
    <div class="content">
        2
    </div>
    <div class="content">
        3
    </div>
    <div class="content">
        4
    </div>
    <div class="content selected">
        5
    </div>
    <div class="content">
        6
    </div>
    <div class="content">
        7
    </div>
  </div>
</body>

【讨论】：