Question

我正在尝试设置一个由两列构成的简单布局

一个浮在左边，就像一个侧边栏。另一个通过设置左边距自然地“浮动”到右侧。

（我想水平对齐两个元素）

但是我在左边元素上面有一个额外的边距，如图所示：

enter image description here

<html><head>
        <style>
        .leftbar {
            float: left;
        }
        .userinfo-meta {
            border: 3px solid #666;
            min-height: 300px;
        }
        .post {
            min-height: 100px;
            margin-left: 21%;
            width: 60%;
            border: 3px solid #876;
        }
    </style>
</head>
<body>
    <div class="post">This element should be on the same level as the right</div>
    <div class="userinfo-meta leftbar">This one floats to the left</div>
</body></html>

P.S我不能使用左边元素的负边距 - 顶部，另一个元素的高度变化...如果发生变化，则需要再次调整保证金顶部。

Answer 1

添加保证金意味着div不会那样。如果你float div .post你不需要float左边的.leftbar div，你可以根据需要使用。

添加float:right并将margin-left移至.post CSS：

    .post {
        min-height: 100px;
        width: 60%;
        border: 3px solid #876;
        float:right;
    }

看到这个小提琴：http://jsfiddle.net/vagish/SXtz5/9/

Answer 2

试试这段代码。

<div class="wrapper">
    <div class="post">
        This element should be on the same level as the right
    </div>
    <div class="leftbar">This one floats to the left</div>
</div>

* {
    box-sizing:border-box;
}

.wrapper:before, .wrapper:after{
    display:table;
    content:"";
}

.wrapper:after{
    clear:both;
}

.leftbar {
    border: 3px solid #876;
    width:40%;
    float:left;
}

.post {
    min-height: 100px;
    width: 60%;
    border: 3px solid #876;
    float:right;
}

如果你想要留下相同的高度＆amp;右栏。你可以尝试使用display：table class。

Answer 3

我认为你应该稍微更新你的HTML：

  <html>
    <head>
</head>
<body>
    <div class="post">
        <div class="internal">
        This element should be on the same level as the right
        </div>
    </div>
    <div class="userinfo-meta leftbar">
        <div class="internal">This one floats to the left</div>
    </div>
</body>

http://jsfiddle.net/SXtz5/6/ （你可以看到CSS - 也略有不同）。

然后你可以用.internal div调整任何填充/边距。

Answer 4

您需要更改HTML标记中的顺序，如下所示：

<div class="userinfo-meta leftbar">This one floats to the left</div>
<div class="post">This element should be on the same level as the right</div>

<强> FIDDLE

浮动布局的奇怪，额外余量

4 个答案: