我想让两个 div 扩展到一个容器 div 的宽度，但是我有水平空间答案

【问题标题】：I would like to have two divs expand to a container div's width, but instead, I have horizontal space left over我想让两个 div 扩展到一个容器 div 的宽度，但是我有水平空间
【发布时间】：2012-05-21 15:36:37
【问题描述】：

我有一个简单的网页，其中一个容器 div 中有两个 div。

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
</div>

#container {
  height: 50px;
  width: 100%;
}

#left, #right {
  float: left;
  height: 100%;
  line-height: 100%;

}

两者并排，不需要随着内容展开，因为内容不会填充 div，但 div 需要具有相同的填充量并填充#container div。 我之前并不清楚，但两个 div 需要具有相同的填充，但宽度不同。一个包含姓名，另一个包含电子邮件地址，因此第二个要长得多。

我无法让 div 填充容器 div 的宽度。 #right div 后面有一个空格。

此外，所有内容都基于百分比，而不是固定布局，仅 CSS。

这似乎很简单，所以有人可以指出正确的方向吗？

【问题讨论】：

标签： css html width liquid

【解决方案1】：

您目前没有为两个浮动元素设置宽度。添加一个解决了所有问题：

#container {
  overflow: hidden;
  background: green;
}

#left, #right {
  float: left;
  box-sizing: border-box;
  width: 50%;
  padding: 5% 10%;
  text-align: center;
}

#left  { background: red  }   
#right { background: blue }

小提琴：http://jsfiddle.net/u4G7c/1/

【讨论】：

你的回答很好，但我认为我不够清楚。这两个 div 不应该具有相同的宽度，因为内容不一样。用数学术语来说，我需要 (x+1) + (y+1) = (page width)。 X 和 Y 是不同的任意宽度，但需要相加为特定宽度。
有没有办法让#left div 不固定？这就是问题所在，这将进入纯粹的流动布局。
@gohmifune 左边是流体。向其添加更多文本以查看。

【解决方案2】：

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
</div>

#container {
  height: 50px;
  width: 100%;
}

#left, #right {
  float: left;
  width:46%; padding:2%;
  height: 96%;
  line-height: 100%;

}

【讨论】：

【解决方案3】：

没有边框和填充，给DIVs 一个width 的50%。如果你需要边框和内边距，给它们width 或50% 并将box-sizing 设置为border-box。

【讨论】：

【解决方案4】：

我做了一些更改，但最重要的是 #right 删除 float: left 然后 adding overflow: hidden。

见：http://jsfiddle.net/thirtydot/2AS58/

HTML：

<div id="container">
    <div id="left">left</div>
    <div id="right">right@sdfgsdfsdf.com</div>
</div>

CSS：

#container {
    border: 1px solid red;
    margin: 10px;
}

#left, #right {
    padding: 10px;
    height: 30px;
    line-height: 30px;
    border: 1px solid blue;
}
#left {
    float: left;
}
#right {
    overflow: hidden;
}

【讨论】：