Css 我想将两个div扩展为一个container div'；s宽度，但我有剩余的水平空间

我有一个简单的网页，在一个容器分区中有两个分区

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

}

#容器{
高度：50px；
宽度：100%；
}
#左，#右{
浮动：左；
身高：100%；
线高：100%；
}

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

我无法得到它，因此div填充容器div的宽度。右div后面有一个空格

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

这看起来很简单，有人能给我指出正确的方向吗？

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

}

#容器{
高度：50px；
宽度：100%；
}
#左，#右{
浮动：左；
宽度：46%；填充：2%；
身高：96%；
线高：100%；
}

#容器{
高度：50px；
宽度：100%；
}
#左，#右{
浮动：左；
宽度：46%；填充：2%；
身高：96%；
线高：100%；
}

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

#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 }
​

---

Fiddle:

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

#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 }
​

---

小提琴：

没有边框和填充，给

DIV

s一个

宽度
为
50%
。如果需要边框和填充，请将
宽度设置为
50%
，并将
框大小设置为
边框框
，无边框和填充，将
DIV
宽度设置为
50%
。如果您需要边框和填充，请将
宽度设置为
50%
，并将
框大小设置为
边框框
，我做了一些更改，但最重要的是在
右侧
删除
浮动：左侧
，然后

请参见：

HTML:

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

我做了一些更改，但最重要的是在
#right
上删除
float:left
，然后

请参见：

HTML:

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

你的回答很好，但我认为我不够清楚。两个div的宽度不应该相同，因为内容不一样。用数学术语来说，我需要（x+1）+（y+1）=（页宽）。X和Y是不同的任意宽度，但需要加起来达到特定的宽度。有没有办法使#left div不固定？这就是问题所在，这是一个纯粹的液体布局。@gohmifune左边的是液体。添加更多文本以查看。您的答案很好，但我认为我不够清楚。两个div的宽度不应该相同，因为内容不一样。用数学术语来说，我需要（x+1）+（y+1）=（页宽）。X和Y是不同的任意宽度，但需要加起来达到特定的宽度。有没有办法使#left div不固定？这就是问题所在，这是一个纯粹的液体布局。@gohmifune左边的是液体。添加更多文本以查看。