我想有两个div展开到一个容器div的宽度，但相反，我有水平空间剩余

我有一个简单的网页，在一个容器div中有两个div。我想有两个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的需要有填充相同数量，并填补了#container的股利。 我之前并不清楚，但两个div都需要有相同的填充，但宽度不同。一个将包含一个名称，另一个包含电子邮件地址，因此第二个更长。

我无法得到它，以便divs填充容器div的宽度。 #right div后面有空格。

此外，一切都基于百分比，而不是一个固定的布局，只有CSS。

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

来源

2012-05-21 nobrandheroes

<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-21 15:42:11

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

#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-21 15:43:08 Sampson

你的回答是好的，但我不认为我是很清晰。这两个div不应该有相同的宽度，因为内容不一样。在数学术语中，我需要（x + 1）+（y + 1）=（页面宽度）。 X和Y是不同的任意宽度，但需要合计到特定的宽度。 – nobrandheroes

@gohmifune就像这样：http://jsfiddle.net/u4G7c/2/也许？ – Sampson

有没有办法让#left div不固定？这是问题，这是一个纯粹的液体布局。 – nobrandheroes

无国界和填充，给DIVŞ50%的width。如果您需要边框和填充，请给他们width的50%并将box-sizing设置为border-box。

来源

2012-05-21 15:43:58 Gareth

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

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

HTML：

<div id="container"> 
    <div id="left">left</div> 
    <div id="right">[email protected]</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-23 01:38:10 thirtydot

我想有两个div展开到一个容器div的宽度，但相反，我有水平空间剩余

回答

相关问题