Question

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

我知道我可以使用浮动：留在他们身上，这将有效......但是在这里的第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

不使用float时的常用方法是使用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

您现在也可以使用CSS 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（具有最大兼容性的传统样式）＆amp; Learn more关于flexbox。

Answer 4

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

因此，如果浮动函数导致问题，您可以尝试一些选项。

一个是自我修改div标签中的div对齐<div class="kosher" align=left> 如果这不适合你，那么还有另一种选择，如此保证金。

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

请勿忘记删除<div align=left>。

Answer 5

您可以尝试使用右侧div的保证金

margin: -200px 0 0 350px;

Answer 6

使用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>

并排没有浮动

6 个答案: