相关疑难解决方法(0)

我有一个由DIV制成的网格,其宽度固定,边框为1像素.现在两个DIV相互接触,边界显然是2px.

我怎样才能在整个网格中获得1px边框？

这就是我的意思:

http://jsfiddle.net/Before/4uPtj/

HTML:

<div class="gridcontainer">
  <div class="griditem"></div>
  <!-- 15 more times -->
</div>

CSS:

div.gridcontainer
{
  width: 80px;
  line-height: 0;
}

div.griditem
{
  display: inline-block;            
  border: 1px solid black;
  width: 18px;
  height: 18px;
}

我有一组元素,要求它们的最小宽度等于它们的高度,但未明确设置高度.目前我可以min-width通过jQuery 设置css 属性来实现这一点:

$(document).ready
(
    function()
    {
        $('.myClass').each
         (
             function() {$(this).css('min-width', $(this).css('height'));}
         );
    }
);  

是否可以直接在css中指定此行为？

这是一个展示我想要实现的目标:http://jsfiddle.net/p8PeW/

我需要使用网格布局,但也需要一条水平线来分隔每一行.

我唯一能找到的就是为每个单元格应用边框,但这只有在有足够的单元格填充每一行时才有效.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

.box {
  border-bottom: 2px solid #ffa94d;
  padding: 1em;
}

<div class="wrapper">
  <div class="box">One</div>
  <div class="box">Two</div>
  <div class="box">Three</div>
  <div class="box">Four</div>
</div>

有没有办法解决上述问题,以便整行有边框？

我正在尝试创建由正方形组成的网格/布局.每行四个方格.正方形不能在屏幕大小调整上扭曲.宽度和高度必须始终相同(我不想要固定值).我必须使用CSS网格.谁能帮我 ？

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

我有一个水平的、环绕的 flexbox，如下所示：

.container {
  display:        flex;
  flex-direction: row;
  flex-wrap:      wrap;
}

每行的项目数会因屏幕宽度而异，每个项目的宽度也会有所不同。

我只想为每个 flexbox 行的第一项添加样式。下面是我正在寻找的内容的说明。

Example 1
|--------|--------|--------|
|style me|        |        |
|--------|--------|--------|
|style me|        |        |
|--------|--------|--------|
|style me|        |
|--------|--------|

Example 2
|--------|---|-----|------------|
|style me|   |     |            |
|--------|---|-----|------------|
|  style me     |      |        |
|---------------|------|--------|
| style me |      |
|----------|------|

我如何使用 Flexbox 做到这一点？

我仍然需要在调整屏幕大小时将行换行，所以我认为我不能使用 Grid。但是，如果可以使用 Grid 来解决这个问题，那对我来说也是一个很好的解决方案。