2

我在这里有两个带有非常简单代码的 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 -）之后，我不这样做的两件事t想要的是：1）不使用溢出，所以我不希望在放大后出现滚动条。2）我希望段落内的所有单词即使在放大后也保留在其中。我试图找出一个解决方案，我想出了display: table-cell但我不知道我怎么能在这里使用它。如果有其他解决方案，请给我。

4

1 回答 1

2

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

最佳实践：始终将样式与标记分开。我冒昧地将相关样式与标记分开，注意它是如何更清晰、更干净的。

解释：

  1. 将容器（在您的情况下是它的.subcontent）显示属性设置为table-row.
  2. 将 content divs （在您的情况下.orangebox为 & .bluebox）显示属性设置为table-cell.
  3. 从您的内容中删除浮动规则div。
  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;
}
于 2013-09-15T14:29:09.500 回答