css - CSSの浮きトラブル

Question

float 値が前の DIV のように Left と Right に設定されていても、DIV の 3 行目を適切に配置するのに苦労しています。ここに 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;    
}

score 1 · Accepted Answer

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 を追加すると、「改行」が追加されます。

score 1 · Accepted Answer

フロートを追加するちょっとしたハックである「明確な修正」が必要だと思います... bla bla bla ...それがどのように機能するかを本当に知る必要はありませんが、必要な場合はGoogleで検索してください完全な理解。オーバーフロー: 非表示; 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;
}

次に、「ストレッチ」などではないdivにクラス.cfを追加します。あなたの場合、.address

<div class="address cf">

css で cf を切り替えて .address に入れることもできます。これは、css へのアプローチ方法によって異なります。私はOOCSSアプローチが好きです。.container など、常にクリアが必要な再利用されたものに専用の修正を加えてから、特別な場合に .cf をスローすることがあります。

HEREは、コードを含む jsfiddle です。次回は、jsfiddle で少し小さなユースケースを作成すると、問題をより迅速に絞り込むことができます。

マイクロクリアフィックスについてはこちら

.address の下部にもパディングが必要だと思います-jsfiddleを参照してください。

お役に立てれば。

css - CSSの浮きトラブル

3 に答える 3

Related

Reference