html - 2个并排 float 的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 的边距，这就是我得到的距离，但是否可以用其他方式做到这一点？

我理想的做法是完全去除“#one”上的宽度，使其成为最大尺寸，并向“#two”留出边距。

Answer 1

点赞

working fiddle

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;
}