Html 2浮动div'；s并排，没有宽度

html

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

这就是我想做的：

我想在两个div之间留一个20px的余量，这就是Iv'e能走多远，但是有没有其他方法可以做到呢

我理想的做法是完全删除“1”上的宽度，使其成为最大尺寸，并留有朝向“2”的边距。

如下所示

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

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

---

您可以使用

表格

和

表格单元格

显示类型来模拟

表格

的工作方式。然后使用

边框间距

完成单元格之间的边距

HTML:

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

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

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

---

您可以在

#容器

上设置填充，然后为

#两个

设置负右边距。例如：

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

---

工作示例：

在标题中，您说“无边距”，但在文本（和代码）中，您有边距。你现在想要还是不要？在哪里？完全没有注意到，谢谢：）我确实想用一个边距来分隔两个div。如果您使用float，请确保在下一个元素中都加上：否则您会看到奇怪的事情发生：）