主要使用`float: left`

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>

codepen：https://codepen.io/anon/pen/dRBKWr

我该怎么做？

Answer 1

所需的布局 无法使用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属性设置自动生成的行的高度。在这个网格中，每行高50px。

grid-gap属性是grid-column-gap和grid-row-gap的简写。此规则在网格项之间设置10px间隙。（它不适用于物品和容器之间的区域。）

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

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

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

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

fr unit表示网格容器中可用空间的一小部分。它与flexbox的flex-grow属性相当。

使用grid-column和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

Answer 2

主要使用`float: left`

float CSS属性指定元素应沿其容器的左侧或右侧放置，其中文本和内联元素将围绕它。然后该元素取自网页的正常流程，但仍然是流程的一部分，与absolute positioning相反。

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

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

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 3

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

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

3 个答案:

jsFiddle

主要使用`float: left`

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

3 个答案:

jsFiddle

主要使用float: left

主要使用`float: left`