Question

我在这里有两个带有非常简单代码的div：http://jsfiddle.net/vBngZ/ 代码（HTML）：

<div class="subcontent" id="div2">
    <div class="orangebox" style="width: 55%;margin-top: 6px;float: left;background-color: red;">
        <div class="title">Shipping</div>
        <ul>
            <li>Item will be shipped from Palestine within 48 hours after receiving full payment, with tracking information that will be provided to you.</li>
            <li>All products are checked and packaged well before dispatch.</li>
            <li>We ship the soap with its Gamila Secret original box.</li>
            <li>We ship worldwide by Palastine postal. This international order may take longer to arrive, Normally the shipment to worldwide is used to take 18 to 35 business days.</li>
            <li>If you have not received your shipment within 35 days from payment, please contact us IMMEDIATELY. We will track the shipment and get back to you as soon as possible with a reply. </li>
        </ul>
    </div>
    <div class="bluebox" style="width: 44.3%;margin-top: 6px;float: right;background-color: blue">
        <div class="title">Payment</div>
        <ul>
            <li>We only accept payments via paypal.</li>
            <li>Payment must be made within 4 days upon auction end, otherwise an unpaid case will be opened</li>
        </ul>
    </div>
</div>

一个div比另一个div高，我希望它们在放大（CTRL +）和缩小（CTRL - ）之后都在相同的行/行和相同的高度，两件事我不想要的是： 1）不使用溢出，所以我不希望在放大后出现滚动条。 2）即使放大后，我希望段落中的所有单词都保留在其中。我试图找出一个解决方案，我想出了display: table-cell，但我不知道我怎么能在这里使用它。如果有任何其他解决方案，请给我。

Answer 1

我已使用有效的解决方案更新了您的Fiddle。

最佳实践：始终将样式与标记分开。我冒昧地将相关的造型与标记分开，注意它的清晰度和清晰度。那样干净。

<强>解释

将容器（在您的情况下为.subcontent）显示属性设置为table-row。
将内容div s（在您的情况下为.orangebox＆amp; .bluebox）显示属性设置为table-cell。
从内容div中删除浮动规则。
将margin-top替换为padding-top。

<强> CSS

.subcontent
{
    display: table-row;
}
.orangebox
{
    display: table-cell;
    width: 55%;
    padding-top: 6px;
    background-color: red;
}
.bluebox
{
    display: table-cell;
    width: 44.3%;
    padding-top: 6px;
    background-color: blue;
}

放大或缩小后，同一行中有两个div

1 个答案: