在流体DIV之前和之后具有固定宽度的Div

Question

我想实现以下目标：

总宽度为100％。

代码＆amp;结果：

   

 #sink{
    width: 700px;
      margin: 0px auto;
    }

.lcars.page-header-before {
  width: 1.5em;
  height: 2em;
  border-radius: 50px 0px 0px 50px;
  display: inline-block;
  background-color: dodgerBlue;
  color: white;
  line-height: 1em;
}
.lcars.page-header-after {
  width: 1.5em;
  height: 2em;
  border-radius: 0px 50px 50px 0px;
  display: inline-block;
  background-color: dodgerBlue;
  color: white;
  line-height: 1em;
}
.lcars.page-header-middle {
  text-transform: uppercase !important;
  background-color: orange;
  color: blue;
  width: calc(100% - 3.6em);
  display: inline-block;
  height: 2em;
  margin-left: 0.3em;
  margin-right: 0.3em;
  padding-left: 0.5em;
  line-height: 1em;
  font-size: 1em;
  padding-top: 0;
  padding-bottom: 0;
}

   

 <div id="sink">
    <div class="lcars page-header">
      <div class="lcars page-header-before">&nbsp;</div>
      <div class="lcars page-header-middle">TEST</div>
      <div class="lcars page-header-after">&nbsp;</div>
    </div>
    </div>

不幸的结果：

我哪里错了？计算出的宽度总是大约4％太大了？整个事情可以在一个div中完成吗？

Answer 1

您对中间对象的数学是精确的（100% - 1.5 - 0.3 - 0.3 - 1.5）= 100% - 3.6em。

但是，除了所提到的内联块陷阱之外，还可以通过多种方式解决，例如。使用HTML comments to connect the divs，还有另一个问题。

您正在使用（默认） W3C Box模型。它从宽度计算中排除边框和填充。因此，如果宽度为：100％，边框为10％，填充为10％，则总宽度为140％。

然后你的padding-left: 0.5em;正在扩大0.5em的中间元素。

然后，您可以重新访问数学，将其转到100% - 4.1em;，就像在此代码段中一样：

＆＃13;

＆＃13;

.page-header{
  border : 2px dashed lime;
}


.lcars.page-header-before {
  width: 1.5em;
  height: 2em;
  border-radius: 50px 0px 0px 50px;
  display: inline-block;
  background-color: dodgerBlue;
  color: white;
  line-height: 1em;
}
.lcars.page-header-after {
  width: 1.5em;
  height: 2em;
  border-radius: 0px 50px 50px 0px;
  display: inline-block;
  background-color: dodgerBlue;
  color: white;
  line-height: 1em;
}
.lcars.page-header-middle {
  text-transform: uppercase !important;
  background-color: orange;
  color: blue;
  width: calc(100% - 4.1em);
  display: inline-block;
  height: 2em;
  margin-left: 0.3em;
  margin-right: 0.3em;
  padding-left: 0.5em;  
  line-height: 1em;
  font-size: 1em;
  padding-top: 0;
  padding-bottom: 0;
}

＆＃13;

<div class="lcars page-header">
  <div class="lcars page-header-before">&nbsp;</div><!--
  --><div class="lcars page-header-middle">TEST</div><!--
  --><div class="lcars page-header-after">&nbsp;</div>
</div>

＆＃13;

＆＃13;

＆＃13;

或者您可以选择采用Traditional Box Model代替W3C Box Model 。

传统的盒子模型在宽度计算中包含边框和填充，如下面的代码片段所示：

＆＃13;

＆＃13;

* {
    box-sizing: border-box;
}

.page-header{
  border : 2px dashed lime;
}


.lcars.page-header-before {
  width: 1.5em;
  height: 2em;
  border-radius: 50px 0px 0px 50px;
  display: inline-block;
  background-color: dodgerBlue;
  color: white;
  line-height: 1em;
}
.lcars.page-header-after {
  width: 1.5em;
  height: 2em;
  border-radius: 0px 50px 50px 0px;
  display: inline-block;
  background-color: dodgerBlue;
  color: white;
  line-height: 1em;
}
.lcars.page-header-middle {
  text-transform: uppercase !important;
  background-color: orange;
  color: blue;
  width: calc(100% - 3.6em);
  display: inline-block;
  height: 2em;
  margin-left: 0.3em;
  margin-right: 0.3em;
  padding-left: 0.5em;  
  line-height: 1em;
  font-size: 1em;
  padding-top: 0;
  padding-bottom: 0;
}

＆＃13;

<div class="lcars page-header">
  <div class="lcars page-header-before">&nbsp;</div><!--
  --><div class="lcars page-header-middle">TEST</div><!--
  --><div class="lcars page-header-after">&nbsp;</div>
</div>

＆＃13;

＆＃13;

＆＃13;

详细了解这两种Box模型之间的差异：

• box-sizing - QuirksMode
• box-sizing - CSS-Tricks

Answer 2

问题是由于内联块之间的空白（换行）。

尝试以下方法：

<div class="lcars page-header">
<div class="lcars page-header-before">&nbsp;</div><div class="lcars page-header-middle">TEST</div><div class="lcars page-header-after">&nbsp;</div>
</div>

或者，您可以使用浮点数。

可以在以下网址找到对此问题的更广泛的处理：

How to remove the space between inline-block elements?

Answer 3

正如Marc所建议的那样，问题与内联块具有的特定行为有关。

他已经提出了一个解决方案，但它的缺点是可读性差。

如果你想继续使用inline-block而不是浮点数，并且保持可读性，那就是将font-size：0设置为容器，然后重新设置font-size：12px（或其他任何值）内容。

<div class="lcars page-header container">
    <div class="lcars page-header-before content">&nbsp;</div>
    <div class="lcars page-header-middle content">TEST</div>
    <div class="lcars page-header-after content">&nbsp;</div>
</div>

.container
{
  font-size:0;
}

.content
{
  font-size:12px;
}

通过这种方式，您解决了代码缩进给出的空白空间问题，如her e。{/ p>清楚解释的那样。