Question

我最近在使用CSS float容器时遇到了一些布局重叠问题，并开始考虑使用display: inline-block。到目前为止，一切都很好。。。除了我需要能够添加换行符，就像clear对于浮点数一样。一些示例文字...

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

是否可以让我的.block-start <div>元素换行？

编辑：我应该提到，每个.block-start元素都必须与其他ib块内联，例如章节编号。

Answer 1

一个有创意的想法是使用伪元素添加新行，并将元素inline设置为使换行符会影响inline-block元素。缺点是您将无法像设置inline一样设置inline-block元素的样式

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

为保持样式（在本例中为边框），我们可以考虑使用更多的技巧：

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

.block-start {
  display: inline;
  padding: 3px 3px 4px;
  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;
  border:1px solid red;
}

.block-start:not(:first-child) {
  border:1px solid transparent;
  border-right-color:red; /*the right is not an issue*/
  background:
    linear-gradient(red,red) top    right   / calc(100% - 3px) 1px,
    linear-gradient(red,red) bottom right   / calc(100% - 3px) 1px,
    linear-gradient(red,red) left 4px top 0 / 1px 100%;
  background-repeat:no-repeat;  
  background-origin:border-box;
  padding-right:4px;  
}

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

我们可以看到，padding-left是这里的问题，因为它已应用于创建换行符的伪元素。解决此问题的一种方法是考虑使用box-decoration-break，但在每行结尾处都会有一个小的缺点：

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

.block-start {
  display: inline;
  padding: 3px 3px 4px;
  white-space: pre-wrap;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone; 
  border:1px solid red;
}
/* Create the break line */
.block-start:not(:first-child):before {
  content: "\A";
}

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

我们仍然可以通过添加一些负边距来解决此问题，以便将其隐藏在其他元素后面（我们还应该添加背景色）

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

.block-start {
  display: inline;
  padding: 3px 3px 4px;
  white-space: pre-wrap;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone; 
  border:1px solid red;
  
  margin-left:-15px;
  
}
.container {
  padding-left:15px;
}
/* Create the break line */
.block-start:not(:first-child):before {
  content: "\A";
}

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

我们还可以考虑其他伪元素和数据属性对样式进行更多控制，而不会受到任何黑客攻击。 这是我推荐的解决方案

我使用了class属性，但是如果您想要其他内容，可以考虑使用自定义属性。

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

.block-start {
  display: inline;
  white-space: pre-wrap;
}

/* Create the break line */
.block-start:not(:first-child):before {
  content: "\A";
}

.block-start:after {
  content: attr(class);
  display:inline-block;
  border:1px solid red;
  padding: 3px;
}

<div class="container">
  <div class="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"></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"></div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
</div>

如果您想在之后清除

，同样的技巧也可以使用

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

.block-end {
  display: inline;
  white-space: pre-wrap;
  
}

/* Create the break line */
.block-end:not(:first-child):after {
  content: "\A";
}

.block-end:before {
  content: attr(class);
  display: inline-block;
  padding: 3px;
  border:1px solid red;
}

<div class="container">
  <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-end"></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-end"></div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="block-end"></div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
</div>

以下是同一个想法的一些变体，在其他情况下可能有用

使用flexbox：

.container {
 display:flex;
 flex-wrap:wrap;
 align-items:center;
}

.ib {
  border: 1px solid #333;
  padding: 3px;
  background:#fff;
  position:relative;
  margin:0 3px 0;
}
.ib + .ib {
   margin-left:0;
}

.block-start {
  display: contents;
  
}
.container {
  padding-left:15px;
}
/* Create the break line */
.block-start:not(:first-child):before {
  content: "";
  flex-basis:100%;
  height:1px;
}
/* Will replace the content*/
.block-start:after {
  content: attr(class);
  border:1px solid red;
  padding: 3px;
}

<div class="container">
  <div class="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"></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"></div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
</div>

使用CSS网格：

.container {
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
 grid-gap:2px;
 align-items:center;
}

.ib {
  border: 1px solid #333;
  padding: 3px;
  background:#fff;
  position:relative;
}

.block-start {
  display: contents;
  
}
.container {
  padding-left:15px;
}
/* Create the break line */
.block-start:not(:first-child):before {
  content: "";
  grid-column:1/-1;
}
/* Will replace the content*/
.block-start:after {
  content: attr(class);
  border:1px solid red;
  padding: 3px;
}

<div class="container">
  <div class="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"></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"></div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
</div>

Answer 2

您所描述的听起来像是磨合版式：

磨合盒是一个合并到其后的块中的框，将其自身插入到该块的行内内容的开头。这对于格式化紧凑的标题，定义和其他类似的东西很有用，在适当的DOM结构中，标题应位于以下散文的前面，但是所需的显示是带有文本的内嵌标题。 [1]

但是，浏览器支持目前很差，并且在某些情况下已经退步[2]。如果您可以控制标记，则将每个// Using `Array.prototype.reduce` [3, 5, 7, 9].reduce((acc, val) => acc * val) // Using a `for ... of` loop let product = 1 for (const val of [3, 5, 7, 9]) { product *= val }和.ib元素包装在一个新的块级标记中可能是最好的选择。

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

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

Answer 3

在if (1,_) in thelist: print("aaa")选择器中，只需将.block-start属性更改为display:inline-block。并如下所示更改html display:block

我希望这会起作用。

<div>

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

用内联块换行

3 个答案: