如何完全拉伸2个嵌入式div？

Question

如何将两个<div>完全展开为50%宽？准备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%;
}

Answer 1

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

Updated jsfiddle

或

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

Updated jsfiddle

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

Answer 3

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

Demo

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之间缺乏有目的的空间。两个内联元素之间的空格是有意义的。