Question

我有一个容器div，其中的子div具有固定的宽度和环绕效果。我意识到的是，包装后，容器的宽度与内容不紧密匹配，通常会在右侧留一个“鬼影”空间。有没有办法强迫它根据其内容重新调整宽度？

.container {
  max-width: 12em;
  background-color: black;
}

.child {
  display: inline-block;
  width: 5em;
  background-color: red;
}

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
</div>

因此，在这种情况下，当孩子在其中两个孩子加起来为10em之后换行时，该容器仍然不是10em，而是12em。而且，如果窗口大小将其强制降低为单个div换行，则取决于窗口宽度，容器可以是5em，6em，7em等，而不是8em

有没有一种方法可以消除“鬼影”空间并使容器完全适合孩子的包裹方式及其总宽度？

注意：我不是在谈论每个子元素之间的额外空间。我指的是容器中留下的巨大间隙，这会导致容器无法准确反映其子内容的大小。我了解我可以简单地计算出12em中可以容纳多少个孩子，然后将容器宽度更改为10em以完美适合2个孩子。但我希望它具有灵活性。有可能吗？

Answer 1

每个子元素后面的多余空间是display: inline-block属性的结果，在HTML中是due to the literal whitespace between each div。您可以通过删除子div之间的换行符来验证这一点，以使它们的打开和关闭标签背对背：

<div class="container">
  <div class="child">1</div><div class="child">2</div><div class="child">3</div>/*...*/
</div>

尽管这将消除讨厌的空格，但这是以代码清晰/可读性为代价的，并且无疑是编写HTML的一种令人不快的方式。

根据我的经验，通常最好的解决方案是将父容器设置为display: flex：

.container {
  display: flex;
  flex-wrap: wrap;
  max-width: 10em;
  background-color: black;
}

.child {
  display: inline-block;
  width: 5em;
  background-color: red;
}

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div><div class="child">5</div>
  <div class="child">6</div>
</div>

在这种情况下，您还需要提供flex-wrap: wrap属性，以通知flex容器包装其内容。大概您现在可以将容器的max-width属性更新为10em，以恰好适合两个子元素的宽度，因此我在代码片段中保留了此更改的自由。

Answer 2

看起来像您要渲染表格。所以您可能要使用：

<table>
    <tr>
        <td>Col1</td>
        <td>Col2</td>
    </tr>
    ...
</table>

万一我错了：

您可以使用 flex 或 grid

有用的链接Flexbox，Grid

.container {
  max-width: 12em;
  background-color: black;
  display: flex;
}

.child {
  display: block;
  min-width: 5em;
  background-color: red;
  border: 1px dashed blue;
}


/* FLEX */
.container-flex {
  /* new row if next element doesnt fit */
  flex-wrap: wrap;
}

.container-flex .child {
  /* makes children grow evenly after wrapping */
  flex-grow: 1;   
}

/* GRID */
.container-grid {
  display: grid;
  /* 2 auto-horizontally sized colums */
  grid-template-columns: auto auto;
}

.container-grid .child {
  /* noting to do here */
}

<div style='float: left; margin-right: 10px;'>
  Flex<br>
  <small>extend elements to 6em</small><br>
  <hr>
  
  <div class="container container-flex">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
  </div>
</div>

<div style='float: left; margin-right: 10px;'>
  Grid<br/>
  <small>collapse container to 10em</small><br>
  <hr>
  
  <div class="container container-grid">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
  </div>
</div>

Answer 3

您可以这样做

   	.container { max-width: 4.5em;background-color: black; }
    .child { display: inline-block; width:cover; background-color: red; }

<!DOCTYPE html>
<html>
<head>
	<title>Answer</title>
</head>
<body>
	<div class="container">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
</div>

将宽度设置为'cover'可以覆盖整个区域，不留任何空间。要固定黑色背景（容器的作用或多或少像边框），您可以手动调整其大小。

使容器div准确确定包装内容的大小

3 个答案: