Question

问题

我目前正在尝试在具有动态宽度的居中包装中左对齐块。我不能仅使用HTML / CSS来实现这一点。

这是一个JSFiddle：https://jsfiddle.net/hudxtL8L/

实施例

目前，它看起来像这样：

|  _____   _____           |
| |     | |     |          |
| |     | |     |          |
| |_____| |_____|          |
|  _____   _____           |
| |     | |     |          |
| |     | |     |          |
| |_____| |_____|          |
|  _____                   |
| |     |                  |
| |     |                  |
| |_____|                  |
|                          |

我希望它看起来像这样：

|       _____   _____      |
|      |     | |     |     |
|      |     | |     |     |
|      |_____| |_____|     |
|       _____   _____      |
|      |     | |     |     |
|      |     | |     |     |
|      |_____| |_____|     |
|       _____              |
|      |     |             |
|      |     |             |
|      |_____|             |
|                          |

或者，在更大的设备上，这样的事情：

|       _____   _____   _____     |
|      |     | |     | |     |    |
|      |     | |     | |     |    |
|      |_____| |_____| |_____|    |
|       _____   _____   _____     |
|      |     | |     | |     |    |
|      |     | |     | |     |    |
|      |_____| |_____| |_____|    |
|       _____                     |
|      |     |                    |
|      |     |                    |
|      |_____|                    |
|                                 |

重要的是，最后一行不是居中的，而是在居中的父级中左对齐。可以这样做，如果是这样，怎么办？我尝试了不同的方法，但都失败了。

尝试过方法

margin：0 auto 不起作用，因为它需要固定的宽度，但我希望每行尽可能多.element。

使用表似乎也很困难，因为我不知道当前设备的一行中有多少.element。

使用 javascript 当然会有效，但我觉得有一个仅限CSS的解决方案。

Answer 1

使用可以使用CVS flex来实现此布局。

一种方法是定义一个容器#content，该容器具有固定的宽度并以margin: 0 auto为中心。

将弹性属性应用于#content，使用justify-content: space-between将子元素置于所需位置。

子.elements需要flex-basis: 100px来指定flex容器上下文中的宽度。

您可以使用边距控制元素之间的间距。

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout

#viewport {
  border: 1px solid black;
}
#content {
  width: 250px;
  margin: 0 auto;
  border: 1px dashed blue;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.element {
  border: 1px dotted black;
  flex-basis: 100px;
  height: 100px;
  margin: 10px; /* optinal, gives you some control on spacing */
}

<div id="viewport">
  <div id="content">
    <div class="element">1</div>
    <div class="element">2</div>
    <div class="element">3</div>
    <div class="element">4</div>
    <div class="element">5</div>
  </div>
</div>

Answer 2

这就是你想要的：

#content {
  width: 300px;
  border: 1px solid red;
}
#outer {
  text-align: center;
  border: 1px solid green;
}

#inner {
  display: inline-block;
  text-align: left;
  border: 1px solid blue;
  padding: 20px;
}

.element {
  display: inline-block;
  border: 1px solid black;
  width: 100px;
  height: 100px;
  margin-left: 15px;
}

Answer 3

 #inner {
    display: block;
    text-align: left;
    border: 1px solid blue;
    text-align:center;
    -moz-text-align-last: left;
      text-align-last: left;
  }
  .element:last-child {
     margin-left:20px;
  }

使用text-align-last：left

如何在居中的div

问题

实施例

尝试过方法

3 个答案: