用内联块换行

时间:2019-06-19 16:27:51

标签: css

我最近在使用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块内联,例如章节编号。

3 个答案:

答案 0 :(得分:6)

一个有创意的想法是使用伪元素添加新行,并将元素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>

enter image description here


如果您想在之后清除

,同样的技巧也可以使用

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

enter image description here


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

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

答案 1 :(得分:0)

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

  

磨合盒是一个合并到其后的块中的框,将其自身插入到该块的行内内容的开头。这对于格式化紧凑的标题,定义和其他类似的东西很有用,在适当的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

答案 2 :(得分:-2)

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