用内联块换行

Question

我float最近在使用CSS 容器时遇到了一些布局重叠问题，并开始考虑使用它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>