css - Div 不居中对齐

Question

我有两个div，一个放在左边，一个放在右边。在左边的 div 中我有文本，在右边的 div 中我有图像。当我复制并粘贴下面的 HTML 并重复同一行 div 时，div 刚好偏离中心。这是为什么？这是我的代码-

HTML -

<div id="wrapper">
    <div id="left">

    <br><br>

    <CENTER> TEXT</CENTER></div>
    <div id="right">

    <br><br>

        <font-size: "14px;">

            IMAGE 
            IMAGE
            IMAGE
            <br><br>

        </td>
    </tr>
</div>

CSS -

#wrapper {
    width: 100%;
    overflow: auto;
}

#left {
    float:left;width:48%;margin-right:1%;
}

#right {
    float:right;width:48%;margin-left:1%;
}
}

Answer 1

我无法重现您报告的问题。如果你看看这个fiddle ，您会发现一切正常。

这假设您也在复制/粘贴包装器 div。如果这不是您想要的(并且您只想在 wrapper 中重复 div)，那么您需要确保您使用的是 classes 而不是 left 和 right 的 id 并且每个新行的 float 都会被清除。您可以通过 .left 类上的 clear: both 实现此目的:

.left {
    clear:both;
    float:left;
    margin-right:1%;
}

您可以在this fiddle 中看到结果: