如何将两行较小的元素与较大的元素对齐？

Question

我正在尝试创建一个响应式网格，其中两行较小的项目与较大的元素对齐。

我想要达到的目标：

我有：

#thumbs {
  background-color: lightcoral;
  width: 100%;
  margin-top: 90px;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

#thumbs div {
  vertical-align: top;
  display: inline-block;
  *display: inline;
  zoom: 1;
}

.stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0
}

<div class=container>
  <div id="thumbs">
    <div>
      <a id="single_image1" href="#"><img src="http://dummyimage.com/300x200/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <span class="stretch"></span>
  </div>
</div>

jsfiddle: http://jsfiddle.net/7985xjud/

我也试过flexbox:

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.flex-item {
  background: tomato;
  padding: 5px;
  margin-top: 10px;
  line-height: 60px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

.big-item {
  width: 300px;
  height: 150px;
}

.small-item {
  width: 100px;
  height: 60px;
}

<ul class="flex-container">
  <li class="flex-item big-item">1</li>
  <li class="flex-item small-item">2</li>
  <li class="flex-item small-item">3</li>
  <li class="flex-item small-item">4</li>
  <li class="flex-item small-item">5</li>
  <li class="flex-item small-item">6</li>
  <li class="flex-item small-item">7</li>
</ul>

代码笔：https://codepen.io/anon/pen/dRBKWr

我该怎么做？

Answer 1

主要使用`float: left`

The float CSS property specifies that an element should be placed along the left or right side of its container, where text and inline elements will wrap around it. Then the element is taken from the normal flow of the web page, though still remaining a part of the flow, contrary to absolute positioning.

虽然我对 <div> 个数字使用了 CSS Counters and Pseudo Elements，但这些规则对布局没有任何影响。
relative 和 absolute 定位仅用于控制数字的布局。

我添加了 <header> 和 <footer>（默认 display: block;）以显示它们与浮动元素之间的交互。
通过在 footer 上添加 clear: both;，我们可以阻止它被吸引到它上面的浮动中，正常（非浮动）行为将在它下面继续。

body {
  counter-reset: num; 
}
div {
  position: relative;
  float: left;
  margin: .5em;
  padding: 3.25em 5em;
  background: tomato;
}
div:first-of-type {
  padding: 7em 10.5em;
}
div:before {
  counter-increment: num;
  content: counter( num );
  position: absolute;
  top: .4em;
  left: .5em;
  font: 3em sans-serif;
  color: white;
}
footer {
  clear: both; /* this breaks the floating behaviour */
}

<header>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</header>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<footer>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</footer>

或者，我们可以将浮动 <div> 与布局的其余部分分开，方法是将它们包装在 <div> 和 display: inline-block; 中。
只要它的前一个和下一个兄弟姐妹不 display: inline*，包装器的行为就好像它是 display: block;.

body {
  counter-reset: num; 
}
.floaters {
  display: inline-block; /* will not display inline with sibling blocks */
}
.floaters div {
  position: relative;
  float: left;
  margin: .5em;
  padding: 3.25em 5em;
  background: tomato;
}
.floaters div:first-of-type {
  padding: 7em 10.5em;
}
.floaters div:before {
  counter-increment: num;
  content: counter( num );
  position: absolute;
  top: .4em;
  left: .5em;
  font: 3em sans-serif;
  color: white;
}

<header>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</header>
<div class="floaters">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<footer>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</footer>

Answer 2

既然你尝试了 flex-box，我强烈建议你学习 Grid 布局。所有最新的浏览器都支持它。通过设置 display: grid 将其定义为弹性盒容器。您可以在 Google 中找到许多使用网格的示例。使用它可以让您有机会根据需要进行设计。您向我们展示的设计可以轻松实现。

Answer 3

所需的布局无法通过 flexbox 实现，至少不能以干净高效的方式实现。原因在这里解释：Is it possible for flex items to align tightly to the items above them?

另一方面，布局相对简单 CSS 网格布局.

grid-container {
  display: grid;                                                 /* 1 */
  grid-auto-rows: 50px;                                          /* 2 */
  grid-gap: 10px;                                                /* 3 */
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));  /* 4 */
}

grid-item:first-child {                                          
  grid-column: 1 / 4;                                            /* 5 */
  grid-row: 1 / 3;                                               /* 5 */
}

/* non-essential decorative styles */
grid-item {
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

<grid-container>
  <grid-item>01</grid-item>
  <grid-item>02</grid-item>
  <grid-item>03</grid-item>
  <grid-item>04</grid-item>
  <grid-item>05</grid-item>
  <grid-item>06</grid-item>
  <grid-item>07</grid-item>
  <grid-item>08</grid-item>
  <grid-item>09</grid-item>
  <grid-item>10</grid-item>
  <grid-item>11</grid-item>
  <grid-item>12</grid-item>
  <grid-item>13</grid-item>
</grid-container>

jsFiddle

工作原理

Establish a block-level grid container.（inline-grid 是另一个选项）
grid-auto-rows 属性设置自动生成行的高度。在此网格中，每行高 50 像素。
grid-gap 属性是 shorthand 用于 grid-column-gap 和 grid-row-gap。此规则在个网格项之间设置了一个 10 像素的间距 。（它不适用于项目和容器之间的区域。）

grid-template-columns 属性设置显式定义列的宽度。

repeat 表示法定义了重复列（或行）的模式。

auto-fill 函数告诉网格在不溢出容器的情况下排列尽可能多的列（或行）。（这可以创建与 flex 布局的 flex-wrap: wrap 类似的行为。）

minmax() 函数设置每列（或行）的最小和最大大小范围。在上面的代码中，每列的宽度最小为容器的 100px，最大为可用的 space。

fr unit 表示网格容器中空闲 space 的一小部分。它与 flexbox 的 flex-grow 属性.
相当
在 grid-column and grid-row 中，我们通过定义网格线为这个特定的网格项设置网格区域。

浏览器支持 CSS 网格

Chrome - 截至 2017 年 3 月 8 日的全面支持（版本 57）

Firefox - 截至 2017 年 3 月 6 日的全面支持（版本 52）

Safari - 截至 2017 年 3 月 26 日的全面支持（版本 10.1）

Edge - 截至 2017 年 10 月 16 日的全面支持（版本 16）

IE11 - 不支持当前规范；支持过时版本

完整图片如下：http://caniuse.com/#search=grid

Firefox 中炫酷的网格覆盖功能

在 Firefox 开发工具中，当您检查网格容器时，CSS 声明中有一个小网格图标。单击它会在页面上显示网格的轮廓。

此处有更多详细信息：https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts

如何将两行较小的元素与较大的元素对齐？

How to fit two rows of smaller elements in line with a bigger element?

html

css

flexbox

css-grid

主要使用`float: left`

jsFiddle

如何将两行较小的元素与较大的元素对齐？

How to fit two rows of smaller elements in line with a bigger element?

html

css

flexbox

css-grid

主要使用float: left

jsFiddle

主要使用`float: left`