2

我让这两个 div 向左浮动，但由于某种原因，一个比另一个高 是什么原因造成的？

在此处输入图像描述

<style type="text/css">
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .address-summary {
        float: left;
        margin: 10px;
    }
</style>

<h2>CheckoutSummary</h2>

<div>
    <div class="address-summary">
        Shipping To:
        <ul>
            <li>@Model.ShippingAddress.Street</li>
            <li>@Model.ShippingAddress.City, @Model.ShippingAddress.State @Model.ShippingAddress.Zip</li>
            <li>@Html.DisplayFor(m => m.ShippingAddress.Phone1)</li>
        </ul>
        <div class="clear-fix"></div>
    </div>
    <div>
        Billing To:
        <ul>
            <li>@Model.BillingAddress.Street</li>
            <li>@Model.BillingAddress.City, @Model.BillingAddress.State @Model.BillingAddress.Zip</li>
            <li>@Model.BillingAddress.Phone1</li>
        </ul>
        <div class="clear-fix"></div>
    </div>
</div>
4

3 回答 3

2

你有一个正在推动 div 向下的margin周围。.address-summary

于 2013-07-28T23:32:28.003 回答
1

这个

 .address-summary {
        float: left;
        margin: 10px;  <<<<<
    }

它在 div 的所有边缘（包括顶部）上添加 10px 的边距。

写法margin和padding写法是：

margin: top right down left;

例如

/* Div has 10px margin all around: */
margin: 10px;

/* Applies 10px to top and bottom margin, and 15px to left and right margins: */
margin: 10px 15px; 

/* Applies 10px margin to top, 15px to both left and right, and 12px to bottom: */
margin: 10px 15px 12px;

/* Apples 10px to top, 15px to right, 12px to bottom, and 13px to left: */
margin: 10px 15px 12px 13px;
于 2013-07-28T23:32:27.710 回答
1

因为你的边距：10px；

你在你的 div 前面做的边距

用这个

margin-left: 10px;
margin-right: 10px;
于 2013-07-28T23:35:54.830 回答