css - 即使放大或缩小后同一行中的两个 div

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

Answer 1

我已经更新了你的 Fiddle有一个可行的解决方案。

最佳做法:始终将样式与标记分开。我冒昧地将相关样式与标记分开，请注意这样更清晰。

解释:

1. 将容器(在您的情况下为 .subcontent)显示属性设置为 table-row。
2. 将内容 div(在您的情况下为 .orangebox 和 .bluebox)显示属性设置为 table-cell.
3. 从您的内容 div 中删除 float 规则。
4. 如果您想在内容之前留出额外空间，请将 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;
}