在网格中制作一个div跨两行 [英] Make a div span two rows in a grid

问题描述

我有一个页面堆满了 display：inline-block 。我想做大约四到两倍，所以我用 float：left 或者 right 来放置其他块。

我的问题是如果我有一个五行元素，我怎么能把一个更大的元素放在中间它的强大？ （如 float 自然放在边上）。

下面是一个示例代码片段：

#wrapper {width：516px;} block {display：inline-block;宽度：90px; height：50px; margin：5px; } $ {$ c}

$ c>< div id =wrapper> < div class =block>< / div> < div class =block>< / div> < div class =block>< / div> < div class =block>< / div> < div class =block>< / div> < div class =block>< / div> < div class =block larger>< / div> < div class =block>< / div> < div class =block>< / div>< / div>

我听说

解决方案

$ C> .block ）。根据这些信息，我们可以推断出容器的高度（ #wrapper ）。 通过知道高度的容器，您的布局可以使用 CSS使用 flex-direction：column 和 flex-wrap：wrap 。 p>



容器上的一个固定高度作为断点，告诉flex项目在哪里包装。



  #wrapper {display：flex; flex-direction：column; flex-wrap：wrap;身高：120px; width：516px;}。block {width：90px; flex：0 0 50px; margin：5px;我们可以通过下面的代码来实现这个功能：     code>< div id =wrapper> < div class =block>< / div> < div class =block>< / div> < div class =block larger>< / div> < div class =block>< / div> < div class =block>< / div> < div class =block>< / div> < div class =block>< / div> < div class =block>< / div> < div class =block>< / div>< / div>  

jsFiddle

---

下面是一个解释为什么flex项目不能包装，除非在容器上有一个固定的高度/宽度： https://stackoverflow.com/a/43897663/3597276

---

<浏览器支持： 所有主流浏览器均支持Flexbox，除IE< 10个。一些最近的浏览器版本，如Safari 8和IE10，需要供应商前缀。要快速添加前缀，请使用 Autoprefixer 。 此答案中的更多详细信息。

I have a page full of blocks which pile up with display: inline-block. I want to make some four or two times bigger, so I used float: left or right to put other blocks around.

My problem is if I have a five-element row, how could I put a bigger element in the middle of it? (as float put it naturally on the side).

Here's an example snippet:

#wrapper{
  width: 516px;
}
.block{
  display: inline-block;
  width: 90px;
  height: 50px;
  margin: 5px;
  background-color: red;
}
.bigger{
  height: 110px;
}

<div id="wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

I heard of display: grid for the wrapper element, but as Can I Use states, this is a pretty on-the-edge technology right now. I was hoping for a non-grid, non-table solution.

Here's what I would like to have from the snippet above

解决方案

You have fixed heights on your child elements (.block). Based on that information, we can extrapolate the height of the container (#wrapper).

By knowing the height of the container, your layout can be achieved using CSS Flexbox with flex-direction: column and flex-wrap: wrap.

A fixed height on the container serves as a breakpoint, telling flex items where to wrap.

#wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 120px;
  width: 516px;
}
.block {
  width: 90px;
  flex: 0 0 50px;
  margin: 5px;
  background-color: red;
}
.bigger {
  flex-basis: 110px;
}

<div id="wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

jsFiddle

---

Here's an explanation why flex items can't wrap unless there is a fixed height / width on the container: https://stackoverflow.com/a/43897663/3597276

---

Browser support: Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.

这篇关于在网格中制作一个div跨两行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！