0

我有一个简单的网页，在一个容器 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。

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

4

4 回答 4

2

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

#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/

于 2012-05-21T15:43:08.803 回答
1 
<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%;

}
于 2012-05-21T15:42:11.503 回答
1

没有边框和填充，给DIVsa width。50%如果您需要边框和填充，请将它们设置width为50%并设置box-sizing为border-box.

于 2012-05-21T15:43:58.330 回答
0

我做了一些更改，但最重要的是#right删除float: left然后添加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;
}​
于 2012-05-23T01:38:10.840 回答