用内联块中断到新行

提问者：小点点

用内联块中断到新行

我最近遇到了一些cssfloat容器的布局重叠问题，并开始考虑使用display:inline-block。到目前为止，还不错。。。但我需要能够添加换行符，就像clear对浮点数所做的那样。一些示例文本。。。

null

.ib {
  border: 1px solid #333;
  display: inline-block;
  padding: 3px;
}
.block-start {
  border: 1px solid #0cc;
  display: inline-block;
  padding: 3px;
}

<div class="container">
      <div class="block-start">block-start</div>
      <div class="ib">inline-block</div>
      <div class="ib">inline-block</div>
      <div class="ib">inline-block</div>
      <div class="ib">inline-block</div>
      <div class="block-start">block-start</div>
      <div class="ib">inline-block</div>
      <div class="ib">inline-block</div>
      <div class="ib">inline-block</div>
      <div class="ib">inline-block</div>
</div>

null

是否可以让我的.block-start

元素开始一个新行？

编辑:我应该提到，每个.block-start元素需要与其他Ib块内联，就像一个章节号。

共3个答案

匿名用户

一个简单的想法是使用伪元素添加新行，并使元素内联，这样换行将影响内联块元素。缺点是不能像使用内联块元素那样对内联元素进行样式化

null

.ib {
  border: 1px solid #333;
  display: inline-block;
  padding: 3px;
}

.block-start {
  display: inline;
  padding: 3px;
  white-space: pre-wrap;
}
/* Create the break line */
.block-start:not(:first-child):before {
  content: "\A";
}

/* to rectify the position of the first one*/
.block-start:first-child {
  padding-left: 0;
}

<div class="container">
  <div class="block-start">block-start</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="block-start">block-start</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="block-start">block-start</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
</div>

匿名用户

您所描述的内容听起来像是一种磨合布局:

run-in box是一个合并到后面的块中的框，它将自己插入到该块的内联级内容的开头。这对于格式化紧凑的标题，定义和其他类似的东西很有用，其中适当的DOM结构是在后面的散文前面有一个标题，但所需的显示是与文本一起排列的内联标题。 [1]

然而，浏览器支持目前非常差，在某些情况下，还出现了退步[2]。如果您可以控制标记，那么将每组.ib和.block-start元素包装在一个新的块级标记中可能是最好的选择。

[1]https://drafts.csswg.org/css-display/#run-in-layout

[2]https://caniuse.com/#feate=run-in

匿名用户

在.block-start选择器中，只需将display:inline-block属性更改为display:block。并更改html

，如下所示

我希望这能奏效。

null

.ib {
  border: 1px solid #333;
  display: inline-block;
  padding: 3px;
}
.block-start {
  border: 1px solid #0cc;
  display: block;
  padding: 3px;
}

<div class="container">
   <div class="block-start">block-start
          <div class="ib">inline-block</div>
          <div class="ib">inline-block</div>
          <div class="ib">inline-block</div>
          <div class="ib">inline-block</div>
   </div>
   <div class="block-start">block-start
          <div class="ib">inline-block</div>
          <div class="ib">inline-block</div>
          <div class="ib">inline-block</div>
          <div class="ib">inline-block</div>
    </div>
</div>