html - 2个浮动div并排，没有宽度

Question

html

<div id="container">
    <div id="one">One</div>
    <div id="two">Two</div>
</div>

css

#container {
    width: 500px;
    height: 500px;
    background-color: red;
}

#one {
    width: 340px;
    height: 100px;
    margin: 20px;
    background-color: green;
    float: left;
}

#two {
    width: 100px;
    height: 100px;
    margin: 20px 20px 20px 0px;
    background-color: blue;
    float: right;
}

这就是我想做的：http: //jsfiddle.net/p4ZAd/

我想在两个 div 之间留出 20px 的边距，这就是 Iv'e 得到的距离，但是否有可能以其他方式做到这一点？

我最理想的做法是完全删除“#one”上的宽度，并将其设为最大尺寸，并在“#two”处留出余量。

Answer 1

您可以使用table和table-cell显示类型来模仿 a 的table工作方式。然后用于border-spacing完成单元格之间的边距。

HTML：

<div id="container">
    <div id="one">One</div>

    <div id="two">Two</div>
</div>

CSS：

#container {
    display: table;
    width: 500px;
    height: 400px;
    background-color: red;
    border-spacing: 20px;
}

#one {
    display: table-cell;
    background-color: green;
}

#two {
    display: table-cell;
    width: 100px;
    background-color: blue;
}

JSFiddle在这里

这是支持的浏览器列表display: table;

Answer 2

像这样

工作小提琴

css

*{
    margin:0;
    padding:0;
}
#container {
    width: 500px;
    height: 500px;
    background-color: red;
    display:table;
}

#one {

    background-color: green;

    display:table-cell;
}

#two {

    background-color: blue;
   display:table-cell;
}

Answer 3

您可以设置填充#container，然后为#two. 例子：

#container {
    width: 360px;
    height: 500px;
    background-color: red;
    padding: 20px 140px 20px 20px;
}

#one {
    height: 100px;
    background-color: green;
    float: left;
    width: 100%;
}

#two {
    width: 100px;
    height: 100px;
    margin: 0 -120px 0 0;
    background-color: blue;
    float: right;
}

工作样本：http: //jsfiddle.net/SytvY/1/