Question

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

包装div可以有一行，允许多行content-div元素在行
最多4个content-div元素可以存在于包装器div的一行上。
最后一行的Content-div元素必须展开才能填充该行。（例如，如果最后一行存在3个content-div元素，则每个content-div的宽度应为33.3％）
总是选择一个且只有一个content-element，并且所选元素应该是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;
}

我认为＆＃34;浮动：正确; float：left position：absolute;顶部：100％;左：0;＆＃34;选项可以处理限制1和限制4，＆＃34; min-width：25％＆＃34;选项可以处理限制2和＆＃34; max-width：100％＆＃34;选项可以处理限制3.但是，通过CSS只能满足一些限制。

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

我会在这方面提供帮助。

This image is what I want to do.

Answer 1

曾经考虑过显示：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;
}

Answer 2

新的flexbox可能性肯定是您正在寻找的。有关一些基本的flexbox属性的更新演示，请参阅下面的代码段或https://jsfiddle.net/6qyc5kLw/3/。另外一个是

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>

Answer 3

您可以使用display：flex

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

在wrapper-div

4 个答案: