1

我正在努力使第三行 DIV 正确对齐，即使浮点值设置为 Left 和 Right 作为之前的 DIV。我在此处附加了整个 HTML 和 CSS 文件，以便您可以轻松地重现问题并告诉我我在哪里犯了错误。

<html>
 <head>
  <title>
    Untitled Page
  </title>  
  <link href="DefaultStyle.css" rel="stylesheet" type="text/css">  
 </head>
 <body>
    <form>
    <div class="page">
        <div class="main">            
         <div id="SomeHeading">          
         <div>                        
                    <span style="display:block">
                    <div>
                    <span><span class="bookName">Book Name : Beginning CSS</span><span class="bookDate">.</span>
                    <fieldset id="PersonalDetailsFieldSet">
                        <legend style="color: #fff; background: #ffa20c; border: 1px solid #781351; padding: 2px 6px;">
                            Personal Details</legend>
                        <span id="TitleLabel">Captn</span>
                        <span id="dot">. </span>
                        <span id="Full_NameLabel">David Beckham</span>
                        <br>
                        <div class="address">
                            <div class="Residential">
                                <h3>Residential Address</h3>
                                <span id="AddressLabel">1 Some Street</span>
                                <br>
                                <span id="SuburbLabel">Some State</span>
                                <span id="twoSpace">  </span>
                                <span id="StateLabel">XYZ</span>
                                <span id="twoSpace1">  </span>
                                <span id="PostcodeLabel">2324</span>
                                <br>                                
                                <span style="font-weight:bold;color:#b51032;">(Ph)</span><span id="H_PhoneLabel">(02) 3242 3435</span>
                            </div>
                            <div class="Organisational">
                                <h3>Organisational Address</h3>
                                <span id="Label2">1 Some Street</span>
                                <br>
                                <span id="Label3">Some State</span>
                                <span id="Label4">  </span>
                                <span id="Label5">XYZ</span>
                                <span id="Label6">  </span>
                                <span id="Label7">2324</span>
                                <br>                          

                                <span style="font-weight:bold;color:#b51032;">(Ph)</span><span id="W_PhoneLabel">(02) 3434 3533</span>
                            </div>
                        </div>
                        <span id="lblMobile" class="caption">Mobile</span>
                        <span id="M_PhoneLabel">0424 243 434</span>
                        <br>

                        <span id="lblEmail" class="caption">Email</span>
                        <span id="EmailLabel">Captain.Beck@gmail.com</span>
                        <br>
                    </fieldset>
                    <input type="image" name="ctl00$MainContent$ListView1$ctrl0$ImageButton1" id="ImageButton1" class="button" src="Delete.png" onclick="return confirm('Are you sure you want to delete this entry?');" style="border-width:0px;">
                    <br>
                    <fieldset id="PaymentDetailsFieldSet">
                        <legend style="color: #fff; background: #ffa20c; border: 1px solid #781351; padding: 2px 6px;">
                            Book and Payment Details</legend>

                       <span id="book_IDLabel">Beginning CSS</span>
                        <br>
                        <span id="lblbookFee" class="caption1">Order Amount</span>
                        <span id="book_FeeLabel">$273.00</span>
                        <br>
                        <span id="lblAvailingDiscount" class="caption1">Discount</span>
                        <span id="Label1">Yes</span>
                        <br>
                        <span id="lblCardType" class="caption1">Card Type</span>
                        <span id="Card_TypeLabel">VISA</span>
                        <br>
                        <span id="lblCardNumber" class="caption1">Card Number</span>
                        <span id="Card_NumberLabel">1243 4545 6457 5678</span>
                        <br>
                        <span id="lblExpiryDate" class="caption1">Expiry Date</span>
                        <span id="Expiry_Date">11 / 11</span>
                        <br>
                        <span id="lblCVC" class="caption1">Verification</span>
                        <span id="CVC">234</span>
                        <br>
                        <span id="lblNameOnCard" class="caption1">Name On Card</span>
                        <span id="Name_On_CardLabel">Captain Beck</span>
                        <br>
                    </fieldset>
                    <br>
                    </span>
                    </div>


                    <span style="display:block">
                    <div>
                    <span>
                     <span class="bookName">Book Name : Effective C++</span>
                     <span class="bookDate">.</span>
                     <fieldset id="PersonalDetailsFieldSet">
                        <legend style="color: #fff; background: #ffa20c; border: 1px solid #781351; padding: 2px 6px;">
                            Personal Details</legend>
                        <span id="TitleLabel">Miss</span>
                        <span id="dot">. </span>
                        <span id="Full_NameLabel">Shanahan Christie</span>
                        <br>                        
                        <div class="address">
                            <div class="Residential">                           
                                <h3>Residential Address</h3>                                
                                <span id="AddressLabel">KMS Oregon School</span>
                                <br>
                                <span id="SuburbLabel">Oregon</span>
                                <span id="twoSpace">  </span>
                                <span id="StateLabel">XYZ</span>
                                <span id="twoSpace1">  </span>
                                <span id="PostcodeLabel">2914</span>
                                <br>                                
                                <span style="font-weight:bold;color:#b51032;">(Ph)</span><span id="H_PhoneLabel">(02) 6241 7650</span>                          
                            </div>
                            <div class="Organisational">
                                <h3>Organisational Address</h3>                             
                                <span id="Label2">KMS Oregon School</span>
                                <br>
                                <span id="Label3">Oregon</span>
                                <span id="Label4">  </span>
                                <span id="Label5">XYZ</span>
                                <span id="Label6">  </span>
                                <span id="Label7">2914</span>                               
                                <br>                                
                                <span style="font-weight:bold;color:#b51032;">(Ph)</span><span id="W_PhoneLabel">(02) 6241 7650</span>
                            </div>
                        </div>                      
                        <span id="lblMobile" class="caption">Mobile</span>
                        <span id="M_PhoneLabel">1234 776 031</span>
                        <br>                                                                    
                        <span id="lblEmail" class="caption">Email</span>
                        <span id="EmailLabel">Shanahan.Cristie@harrisonSchool.com</span>
                        <br>
                    </fieldset>
                    <input type="image" name="ctl00$MainContent$ListView1$ctrl2$ImageButton1" id="ImageButton1" class="button" src="Delete.png" onclick="return confirm('Are you sure you want to delete this entry?');" style="border-width:0px;">
                    <br>
                    <fieldset id="PaymentDetailsFieldSet">
                        <legend style="color: #fff; background: #ffa20c; border: 1px solid #781351; padding: 2px 6px;">
                            Book and Payment Details</legend>

                       <span id="book_IDLabel">Effective C++</span>
                        <br>
                        <span id="lblbookFee" class="caption1">Order Amount</span>
                        <span id="book_FeeLabel">$250.00</span>
                        <br>
                        <span id="lblAvailingDiscount" class="caption1">Discount</span>
                        <span id="Label1">No</span>
                        <br>
                        <span id="lblCardType" class="caption1">Card Type</span>
                        <span id="Card_TypeLabel">VISA</span>
                        <br>
                        <span id="lblCardNumber" class="caption1">Card Number</span>
                        <span id="Card_NumberLabel">1234 5678 9098 7654</span>
                        <br>
                        <span id="lblExpiryDate" class="caption1">Expiry Date</span>
                        <span id="Expiry_Date">11 / 11</span>
                        <br>
                        <span id="lblCVC" class="caption1">Verification</span>
                        <span id="CVC">123</span>
                        <br>
                        <span id="lblNameOnCard" class="caption1">Name On Card</span>
                        <span id="Name_On_CardLabel">Shanahan Christie</span>
                        <br>
                    </fieldset>
                    <br>
                    </span>
                  </div>


                  <span style="display:block">
                    <div>
                      <fieldset id="PersonalDetailsFieldSet">
                        <legend style="color: #fff; background: #ffa20c; border: 1px solid #781351; padding: 2px 6px;">
                            Personal Details</legend>
                        <span id="TitleLabel">Profe</span>
                        <span id="dot">. </span>
                        <span id="Full_NameLabel">Kallis K</span>
                        <br>                        
                        <div class="address">
                            <div class="Residential">
                                <h3>Residential Address</h3>
                                <span id="AddressLabel">36 Westmead Street</span>
                                <br>
                                <span id="SuburbLabel">Giralang</span>
                                <span id="twoSpace">  </span>
                                <span id="StateLabel">XYZ</span>
                                <span id="twoSpace1">  </span>
                                <span id="PostcodeLabel">2423</span>
                                <br>

                                <span style="font-weight:bold;color:#b51032;">(Ph)</span><span id="H_PhoneLabel">(02) 3232 3242</span>                              
                            </div>
                            <div class="Organisational">
                                <h3>Organisational Address</h3>
                                <span id="Label2">36 Westmead Street</span>
                                <br>
                                <span id="Label3">Giralang</span>
                                <span id="Label4">  </span>
                                <span id="Label5">XYZ</span>
                                <span id="Label6">  </span>
                                <span id="Label7">2423</span>                               
                                <br>                                                          
                                <span style="font-weight:bold;color:#b51032;">(Ph)</span><span id="W_PhoneLabel">(02) 3423 4232</span>                          
                            </div>                          
                        </div>                      
                        <span id="lblMobile" class="caption">Mobile</span>
                        <span id="M_PhoneLabel">0423 242 323</span>
                        <br>

                        <span id="lblEmail" class="caption">Email</span>
                        <span id="EmailLabel">Kalis@gmail.com</span>
                        <br>
                    </fieldset>
                    <input type="image" name="ctl00$MainContent$ListView1$ctrl4$ImageButton1" id="ImageButton1" class="button" src="Delete.png" onclick="return confirm('Are you sure you want to delete this entry?');" style="border-width:0px;">
                    <br>
                    <fieldset id="PaymentDetailsFieldSet">
                        <legend style="color: #fff; background: #ffa20c; border: 1px solid #781351; padding: 2px 6px;">
                            Book and Payment Details</legend>

                       <span id="book_IDLabel">Effective C++</span>
                        <br>
                        <span id="lblbookFee" class="caption1">Order Amount</span>
                        <span id="book_FeeLabel">$175.00</span>
                        <br>
                        <span id="lblAvailingDiscount" class="caption1">Discount</span>
                        <span id="Label1">Yes</span>
                        <br>
                        <span id="lblCardType" class="caption1">Card Type</span>
                        <span id="Card_TypeLabel">VISA</span>
                        <br>
                        <span id="lblCardNumber" class="caption1">Card Number</span>
                        <span id="Card_NumberLabel">2324 3232 4242 3442</span>
                        <br>
                        <span id="lblExpiryDate" class="caption1">Expiry Date</span>
                        <span id="Expiry_Date">11 / 11</span>
                        <br>
                        <span id="lblCVC" class="caption1">Verification</span>
                        <span id="CVC">232</span>
                        <br>
                        <span id="lblNameOnCard" class="caption1">Name On Card</span>
                        <span id="Name_On_CardLabel">Kallis K</span>
                        <br>
                    </fieldset>
                    <br>                    
                    </div>  
                   </span>                  
        </div>
        </div>
        </div>
        <div class="clear">
        </div>
    </div>
    </form>
</body>
</html>

CSS 文件...

body   
{
    background: #b6b7bc;
    font-size: .80em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
}

h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #666666;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}

.page
{
    width: 1200px;
    background-color: #fff;
    margin: 20px auto 0px auto;
    border: 1px solid #496077;
}

.main
{
    padding: 0px 12px;
    margin: 12px 8px 8px 8px;
    min-height: 420px;
}

fieldset
{
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
}

.clear
{
    clear: both;
}

/* Default Style.css*/
.caption
{
    width:6em;
    float:left;
    margin-right:0.2em;
    display:block;
    font-weight:bold;  
    color:#b51032;  
}

.caption1
{
    width:9em;
    float:left;
    margin-right:0.2em;
    display:block;
    font-weight:bold;  
    color:#b51032;    
}

.bookHeader
{
    display:block;
    background-color:#b51032;
    color:white;
    font-weight:bold;
    font-size:large;
}

.bookDate
{
    color:#b51032;
    font-weight:bold;
    font-size:large;
    float:right;
    background-color:#b51032;
    width:15%;
    text-align:right;
    margin-left:-30px;
    /*border:1px dotted yellow;*/
}

.bookName
{
    color:white;
    font-weight:bold;
    font-size:large;
    float:left;
    background-color:#b51032;
    width:85%;    
}

.button
{

    float:right;
    margin-top:100px;
    margin-left:20px;    
}

#PersonalDetailsFieldSet
{
    border: 1px solid #781351; 
    width: 30em; 
    float:left;
    font-weight:bold;
}
.address{
    margin-top: 5px;
    width: 30em;
    border:1px solid #781351;
}
.address .Residential{
    display: inline-block;
    /*vertical-align: top;*/
    width: 14em;
    /*border:1px solid #781351;*/
}
.address .Organisational{
    width: 14em;
    margin-right: 15px; 
    padding-left: 5px;
    float: right; 
    display: inline-block;
    /*vertical-align: top;*/
    border-left:1px solid #781351;
}

#PaymentDetailsFieldSet
{
    border: 1px solid #781351; 
    width: 30em; 
    float:right; 
    margin-right:10px; 
    margin-left:-20px;
    font-weight:bold;
}

.page
{
    width: 960px;
    margin: 20px auto 0px auto;    
}
4

3 回答 3

1

你需要清除你的浮动。

具体来说，在每两个实例之后：

</fieldset>

添加：

<div style="clear: both;"></div>
于 2013-05-31T17:35:07.717 回答
1

你需要clear在行之间浮动 - 这里：http: //jsfiddle.net/YCZJ5/1/是一个修复的小提琴。

为了解释这种行为，我们将左浮动 div 命名为 A 和 B，而右浮动 div 命名为 C 和 D，因此您的结构如下：

AA CC
AA CC 
BB DD
BB DD

然而，由于每个元素的高度，结果如下：

AA CC
AA CC
AA BB DD
   BB DD

在元素 C 之后添加 clear 会添加“换行符”。

于 2013-05-31T17:42:16.400 回答
1

我认为你只需要一个“清除修复”，它只是一个添加浮动的小技巧...... bla bla bla......你不需要真正知道它是如何工作的，但是如果你想拥有谷歌它充分了解。溢出：隐藏；也可以强制 div 扩展并包含它的东西，但是，它有很多副作用。

将此“微清除修复”CSS 添加到您的样式表中：

.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

然后将类 .cf 添加到不是“拉伸”或其他任何内容的 div 中。在你的情况下， .address

<div class="address cf">

您也可以在 css 中切换 cf 并放入 .address - 这取决于您如何处理 css。我喜欢 OOCSS 方法。我对总是需要清理的重复使用的东西进行了专门的修复，比如 .container 或其他东西，然后偶尔会在特殊情况下添加 .cf。

HERE是一个 jsfiddle，其中包含您的代码。下一次，在 jsfiddle 中做一个小用例，我们可以更快地缩小问题范围。

在此处阅读有关微清除修复的信息

我认为您也需要在 .address 的底部进行一些填充 - 请参阅 jsfiddle。

希望这可以帮助。

于 2013-05-31T18:09:24.190 回答