Question

所以通常我只会打开显示：内联块，但我仍然需要块在一个单独的行上。 Block执行此操作但占用其父容器的最大宽度。如何获得一个取代所需最小宽度的块呢？

Answer 1

以下是3种方法：

1）使用float:left和clear:left作为块元素。这个问题的缺点是需要在块之前或之后的任何内容。

2）使用display: table

3）使用伪选择器（:after）强制换行，同时元素显示inline。

＆＃13;

div[class] {
  margin:1em;
  padding-bottom: 1em;
  border-bottom:1px dashed #CCC;
  overflow: auto;
}

div > div {
  background:#000;
  color:#FFF;
  padding:1em;
}

/* solution 1: float clear */
.s1 div {
  float:left;
  clear:left;
}

/* solution 2: table */
.s2 div {
  display: table;
}

/* solution 3: break line with psuedo element (after) */
.s3 div {
  display:inline;
  padding:0;
}
.s3 div:after {
  content:"\A";
  white-space:pre;
}

＆＃13;

<div class="s1">
  <p>Solution 1</p>
  <div>hello</div>
  <div>universe</div>
</div>

<div class="s2">
  <p>Solution 2</p>
  <div>hello</div>
  <div>universe</div>
</div>

<div class="s3">
  <p>Solution 3</p>
  <div>hello</div>
  <div>universe</div>
</div>

＆＃13;

jsFiddle：https://jsfiddle.net/azizn/s9zxm2o4/

如何使块占用最小所需宽度？

1 个答案: