相关疑难解决方法(0)

这两种方法中的哪一种符合W3C标准？它们是否都在浏览器中按预期运行？

border:none;
边界:0;

输出:

你好
,你好吗？

码:

<p>hello <br> How are you </p>

如何实现相同的输出<br>？

假设我有这个HTML:

<h3>Features</h3>
<ul>
    <li><img src="alphaball.png">Smells Good</li>
    <li><img src="alphaball.png">Tastes Great</li>
    <li><img src="alphaball.png">Delicious</li>
    <li><img src="alphaball.png">Wholesome</li>
    <li><img src="alphaball.png">Eats Children</li>
    <li><img src="alphaball.png">Yo' Mama</li>
</ul>

这个CSS:

li { text-align:center; display:inline-block; padding:0.1em 1em }
img { width:64px; display:block; margin:0 auto }

结果可以在这里看到:http://jsfiddle.net/YMN7U/1/

现在想象一下,我想把它分成三列,相当于<br>在第三列之后注入一个<li>.(实际上这样做在语义和语法上都是无效的.)

我知道如何选择<li>CSS中的第三个,但是如何在它之后强制换行呢？这不起作用:

li:nth-child(4):after { content:"xxx"; display:block }

我也知道这个特殊情况可以通过float代替使用inline-block,但我对使用的解决方案不感兴趣float.我也知道,对于固定宽度的块,可以通过将父级的宽度设置为宽度的ul3倍来实现.我对这个解决方案不感兴趣.我也知道,display:table-cell如果我想要真正的列,我可以使用; 我对这个解决方案不感兴趣.我对在内联内容中强制中断的可能性感兴趣.

编辑:要清楚,我对"理论"感兴趣,而不是特定问题的解决方案.CSS可以在display:inline(-block)?元素中间注入换行符,还是不可能？如果你确定这是不可能的,这是一个可以接受的答案.

我不认为这是flexbox标准的一部分,但是在某个元素之后可能有一个建议或强制包装的技巧吗？我想响应不同的页面大小并以不同的方式包装列表而不需要额外的标记,这样我就不会在下一行中有(例如)孤立的菜单项,而是在菜单中间打破.

这是开始的html:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

和css:

ul {
    display: flex;
    flex-wrap: wrap;
}

我喜欢以下内容:

/* inside media query targeting width */
li:nth-child(2n) {
    flex-break: after;
}

有关更完整的设置,请参阅jsfiddle:http://jsfiddle.net/theazureshadow/ww8DR/

我经常想知道正确使用 <br>换行符.似乎通常它们被错误地用于定位或清除应该使用CSS的内容.

W3schoools.org表示<br>用于空行,但不用于创建或分隔段落.回顾一下W3C HTML5规范草案,<br>当内容需要换行符时会更加清晰,例如地址行或诗歌中的空行,作者有意.

但我仍然有兴趣进一步澄清或输入任何其他人.我经常发现自己选择不使用<br>标签,而只是使用所需的清除,边距,填充等样式元素来创建所需的空间.

并不是说这是非常重要的,但这里有一个让我思考这个问题的例子,一个流行的("权威的")网站使用了一个<br>我不确定是非常语义的网站.在这里,我只是<a>通过CSS 清除它的兄弟姐妹:

<p>Lorem ipsum dolor sit amet, consectetur tempor laborum.</p>
<br>
<a href="#readmore">more &gt;&gt;</a>

我使用flexbox得到了一个表,并注意到一个有趣的特性:br元素在flexbox中无法做任何事情.

例:

.flexbox {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
  padding: 2px;
}

.item {
  width: 50px;
  height: 50px;
  margin: 2px;
  border: 2px solid blue;
}

.new-row, br {
  display: block;
  width: 100%;
  height: 0px;
}

<p>Line break using div:</p>
<div class="flexbox">
  <div class="item"></div>
  <div class="item"></div>
  <div class="new-row"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<p>Line break using br:</p>
<div class="flexbox">
  <div class="item"></div>
  <div class="item"></div>
  <br>
  <div class="item"></div>
  <div class="item"></div>
</div>

在示例中,div并br共享相同的属性,但div将元素传递给新行,而 …

我想知道我如何能够(大约)在每一行上保留相同数量的元素,包括最后一行,flex-wrap或(包括任何其他想法flexbox).

例如,我有一个包含6个元素的flexbox.当它打破时我想在第一行有3个元素,在第二行有3个(或两个元素的总宽度大致相同).

(我不想调整孩子的大小,或者打破flexbox的功能.)

现在我只能在第一行获得5个元素,在最后一行获得一个元素.

ul {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}

这是一个jsfiddle:https://jsfiddle.net/yfj2g7wx/

我认为大部分时间它会以图形方式提供比逐个包装元素更好的结果.

这可能吗 ？

我正在为一个应用程序构建一个主页，我在靠近网站顶部的一行中有四个“价值主张”块。

我正在使用 flexbox，以便块会在调整网站大小时做出响应，这很有效，但是我想避免在一行中有 3 个块而在第二行中有 1 个块作为孤块的情况，在它包装到 2x2 之前，最后是单列。

这是我的 CSS：

.value-prop {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;

  .prop {
    padding: 10px 20px;
    flex-basis: 25%;
    text-align: center;

    img {
      height: auto;
      margin: 0 0 10px;
      width: 200px;
    }
  }
}

我试过把它们分成两块，每块两块，但间距开始变得有点时髦。我知道可以这样做，但我希望有一种我不知道的更简单的方法。

有一个flexbox网格.

.flex {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
}

.item {
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 2px solid blue;
}

<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item new-string"></div>
</div>

如何将.new-string与其后的元素一起转移到新行？

如果我有以下内容:

<div id="flex">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

假设flex-direction: row并且三个<div></div>元素适合一行,浏览器是否可以在每一行显示2行,两行,而不是在一行上显示3,然后在下一行显示1？