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

Answer 2

您可以使用table和table-cell显示类型来模仿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 here

Here's a list of browsers that support display: table;

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/

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

3 个答案: