div并排没有浮动

Question

如何使 div 'left' 和 'right' 看起来像并排的列？

我知道我可以在它们上使用 float:left 并且这会起作用...但是在这里的第 5 步和第 6 步http://www.barelyfitz.com/screencast...s/positioning/ 那家伙说这是可能的，但我无法让它工作......

代码：

<style>
div.left {
    background:blue;
    height:200px;
    width:300px;
}

div.right{
    background:green;
    height:300px;
    width:100px;
}

.container{
    background:black;
    height:400px;
    width:450px;
}
</style>

<div class="container">
        <div class="left">
            LEFT
        </div>
        <div class="right">
            RIGHT
        </div>
</div>

Answer 1

不使用floats的常用方法是使用display: inline-block：http://www.jsfiddle.net/zygnz/1/

.container div {
  display: inline-block;
}

请注意它的限制：在第一个块之后还有一个额外的空间 - 这是因为这两个块现在本质上是 inline 元素，例如 a 和 em，所以两个块之间有空格。这可能会破坏您的布局和/或看起来不太好，并且为了这项工作，我不希望删除字符之间的所有空格。

在大多数情况下，浮点数也更灵活。

Answer 2

div 是block level element，这意味着它将表现为一个块，并且块不能并排放置而不浮动。但是，您可以使用以下命令将它们设置为 inline elements：

display:inline-block;

试一试……

---

另一种方法是使用：

position:absolute;
left:0;

和/或

position:absolute;
right:0;

注意：要使其按预期工作，包装器元素必须具有position:relative;，以便具有绝对定位的元素相对于它们的包装器元素保持不变。

Answer 3

您也可以使用 CSS3 flexbox 布局，现在是 well supported。

.container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    background:black;
    height:400px;
    width:450px;
}

.left {
    flex: 0 0 300px;
    background:blue;
    height:200px;
}

.right {
    flex: 0 1 100px;
    background:green;
    height:300px;
}

See Example（使用旧样式以获得最大兼容性）和Learn more 关于 flexbox。

Answer 4

我目前正在研究这个，我已经有一些解决方案。 很高兴有一个高质量的网站，我也可以使用它来方便我。 因为如果你不把这些东西写下来，你最终会忘记一些部分。 如果你正在开始任何新的编程/设计，我还可以建议你写一些基本的东西。

因此，如果浮点函数导致问题，您可以尝试几个选项。

一个是修改它自己的div标签中的div对齐方式@9​​87654321@ 如果这不适合您，那么还有另一种带有保证金的选项。

.leftdiv {
    display: inline-block;
    width: 40%;
    float: left;
}
.rightdiv {
    display: block;
    margin-right: 20px;
    margin-left: 45%;
}

不要忘记删除<div align=left>。

Answer 5

使用display:table-cell; 删除.Left 和.Right 之间的空格

div.left {
    background:blue;
    height:200px;
    width:300px;
}

div.right{
    background:green;
    height:300px;
    width:100px;
}

.container{
    background:black;
    height:400px;
    width:450px;
}

.container > div {
    display: table-cell;
}

<div class="container">
  <div>
    <div class="left">
      LEFT
    </div>
  </div>
  <div>
    <div class="right">
      RIGHT
    </div>
  </div>
</div>

Answer 6

你可以试试右边 div 的边距

margin: -200px 0 0 350px;