1

我怎样才能完全拉伸两个<div>s50%宽？准备好jsFiddle。

HTML

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

CSS

div.container {
   width: 100%;
}

div.left, div.right {
   display:inline;
   width:50%;
}
4

3 回答 3

3 
div.container {
    width: 100%;
    white-space: nowrap;
}
div.left, div.right {
    display: inline-block;
    width: 50%;
}

更新了 jsfiddle

或者：

div.container {
    width: 100%;
}
div.left, div.right {
    float: left;
    width: 50%;
}

更新了 jsfiddle

于 2013-09-05T00:40:41.363 回答
2

一种方法：使用inline-blockand box-sizing: border-box（如果您有边界，则使用后者）

演示

CSS：

div {
    box-sizing: border-box;
}
div.container{
    width: 100%;
    position: relative;
    border: 1px solid blue;
}

div.left, div.right {
    display:inline-block;
    width:50%;
    border: 1px solid black;
}

HTML：

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

注意：有目的的两个 div 之间缺少空间。两个内联元素之间的空格是有意义的。

于 2013-09-05T00:47:57.983 回答
2

有多种方法可以做到这一点。你可以像这样应用css。

div.left, div.right {
    position: relative;
    float:left;
    width:50%;
}

http://jsfiddle.net/cdydq/14/

这是另一种可以呈现所需结果的方法。

div.container {
    position: relative;
    width: 100%;
}
div.left {
    position: relative;
    width:50%;
}
div.right {
    position: absolute;
    margin-left:50%;
    width:50%;
    top:0
}

http://jsfiddle.net/cdydq/18/

于 2013-09-05T00:43:50.153 回答