相关疑难解决方法(0)

加号(+)用于下一个兄弟.以前的兄弟姐妹是否有同等效力？

实际上,这是Pinterest布局.但是,在线发现的解决方案包含在列中,这意味着容器无意中水平生长.这不是 Pinterest布局,并且它不适用于动态加载的内容.

我想要做的是有一堆固定宽度和不对称高度的图像,水平放置,但当满足固定宽度容器的限制时包裹在一个新行中:

flexbox可以做到这一点,还是我不得不求助于像Masonry这样的JS解决方案？

我有一个装满了块的页面display: inline-block.我想做四到两倍大,所以我用float: left或者right把其他块放在一边.

我的问题是,如果我有一个五行元素,我怎么能在它的中间放一个更大的元素？(float自然而然地放在一边).

这是一个示例代码段:

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

以下是我希望从上面的代码段中获得的内容

什么时候

grid-template-areas:
       "....... header  header"
       "sidebar content content";

改为:

grid-template-areas:
       "....... header  header"
       "sidebar header content";

一切都崩溃了.

如何使用CSS Grid布局实现相同的效果？

body {
  margin: 40px;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.header {
  grid-area: header;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 120px 120px 120px;
  grid-template-areas: "....... header  header"
                       "sidebar content content";
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.header {
  background-color: #999;
}

<div …

关于CSS Grid的浏览器支持情况如何？

我环顾四周，很难理解有关兼容性的整个情况。

如果我转到可以使用，似乎几乎所有浏览器都支持它。但是，如果我转到Microsoft文档，情况会有所变化。

似乎几乎所有浏览器都支持Grid，但除Firefox外，它们都不支持所有功能。

然后，关于Edge，我得到的是它仅支持不再使用的旧规范，而当前正在进行更新。