使用inline-block换行 [英] Breaking to a new line with inline-block

问题描述

我最近遇到了css float 容器的一些布局重叠问题，并且开始考虑使用 display：inline-block 代替。到目前为止，一切都很好...除了我需要能够添加换行符，如 clear 对于浮点数一样。一些示例文本...

  .ib {border：1px solid＃333 ;显示：inline-block; padding：3px;}。block-start {边框：1px实线＃0cc;显示：inline-block;填充：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 块内联，例如章节编号。

解决方案

一个有创意的想法是使用伪元素添加新行，并使元素 inline 如此换行将影响 inline-block 元素。缺点是您将无法像使用 inline-block one <那样对 inline 元素进行样式设置

  .ib {
 border：1px solid＃333; 
显示：inline-block; 
填充：3px； 
} 
 
 .block-start {
 display：inline; 
填充：3px； 
空白：预包装； 
} 
 / *创建分隔线* / 
 .block-start：not（：first-child）：before {
 content： \A; 
} 
 
 / *来纠正第一个* / 
的位置。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 {
边框：1px实线＃333； 
显示：inline-block; 
填充：3px； 
} 
 
 .block-start {
 display：inline; 
填充：3px 3px 4px; 
空白：预包装； 
} 
 / *创建分隔线* / 
 .block-start：not（：first-child）：before {
 content： \A; 
} 
 
 / *来纠正第一个* / 
的位置。block-start：first-child {
 padding-left：0; 
边框：1px纯红色； 
} 
 
 .block-start：not（：first-child）{
 border：1px纯透明； 
 border-right-color：red; / *权利不成问题* / 
背景：
线性渐变（红色，红色）右上角/ calc（100％-3px）1px，
线性渐变（红色，红色）右下/ calc（100％-3px）1像素，
线性渐变（红色，红色）左4像素顶部0/1像素100％; 
背景重复：不重复； 
 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 是这里的问题，因为它应用于创建换行符的伪元素。解决此问题的一种方法是考虑

---

如果您想在

之后清除 ，同样的技巧也可以使用

  .ib {
 border：1px solid＃333; 
显示：inline-block; 
填充：3px； 
} 
 
 .block-end {
 display：inline; 
空白：预包装； 
 
} 
 
 / *创建分隔线* / 
 .block-end：not（：first-child）：after {
 content： \一种; 
} 
 
 .block-end：之前{{
 content：attr（class）; 
显示：inline-block; 
填充：3px； 
边框：1px纯红色； 
}  

 < 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; 
填充：3px； 
背景：#fff; 
头寸：相对； 
保证金：0 3px 0; 
} 
 .ib + .ib {
 margin-left：0; 
} 
 
 .block-start {
 display：contents; 
 
} 
 .container {
 padding-left：15px; 
} 
 / *创建断行* / 
 .block-start：not（：first-child）：before {
 content：; 
 flex-basis：100％; 
高度：1像素； 
} 
 / *将替换内容* / 
 .block-start：在{
 content：attr（class）;之后
边框：1px纯红色； 
填充：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; 
填充：3px； 
背景：#fff; 
头寸：相对； 
} 
 
 .block-start {
 display：contents; 
 
} 
 .container {
 padding-left：15px; 
} 
 / *创建断行* / 
 .block-start：not（：first-child）：before {
 content：; 
 grid-column：1 / -1; 
} 
 / *将替换内容* / 
 .block-start：在{
 content：attr（class）;之后
边框：1px纯红色； 
填充：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（10000，max-content）; 
 grid-gap：2px; 
 align-items：center; 
} 
 
 .ib {
 border：1px solid＃333; 
填充：3px； 
背景：#fff; 
头寸：相对； 
} 
 
 .container {
 padding-left：15px; 
} 
 / *创建中断线* / 
 .block-start {
 grid-column：1; 
边框：1px纯红色； 
填充：3px； 
} 
 / *将替换内容* / 
 .block-start：在{
 content：attr（class）;之后
}  

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

I've run into some layout overlap issues with a css float container recently, and had started looking at using display: inline-block instead. So far, so good... except I need to be able to add line-breaks, as clear does for floats. Some sample text...

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

Is it possible to have my .block-start <div> elements start a new line?

EDIT: I should mention that each .block-start element needs to be inline with the other ib blocks, like a chapter number.

解决方案

One hacky idea is to add a new line using pseudo element and make the element inline so that the line-break will affect the inline-block elements. The drawback is that you will not be able to style an inline element like you do with an inline-block one

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

To keep the styling (the border in this case) we can consider more hacks:

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

As we can see, the padding-left is the issue here since it's applied to the pseudo element creating the line break. One idea to fix this is to consider box-decoration-break but we will have a small drawback at the end of each line:

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

We can still fix this by adding some negative margin in order to hide it behind the other elements (we should also add background color)

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

We can also consider the other pseudo element and data-attribute to have more control over the styling wihout any hacks. This is the solution I recommend

I have used the class attribute but you can consider a custom one in case you want a different content.

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

---

The same trick can also work if you want to clear after

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

---

Here is some variation of the same idea that can be useful in other situation

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

With CSS grid:

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

Another one with CSS grid:

.container {
 display:grid;
 grid-template-columns:repeat(10000,max-content);
 grid-gap:2px;
 align-items:center;
}

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

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

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

这篇关于使用inline-block换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！