Biała przestrzeń nad drugim blokiem w linii podziału

Question

Jestem pewna, że ​​przeoczyłem coś tutaj, ale nie mogę go rozwiązać. Nad moim drugim blokiem wstawkowym znajduje się biała przestrzeń, co ma miejsce tylko wtedy, gdy długość "tekstu tutaj" w prawym div jest mniejsza niż w lewej.

jsFiddle: http://jsfiddle.net/B2S4r/2/ (Musisz dokonać widoku HTML szerszy, aby zobaczyć je wzdłuż boku każdego innego)

<div style="border-top: 1px dashed black; display: inline-block; width: 250px; margin-bottom: 10px; margin-right: 10px; margin-top: 0;"> 

    <div style="height: 50px; padding-top: 2px; padding-bottom: 2px; text-align:right; font-size: 11px;"> 
     <div style="display: block; width: 80px; height: 50px; float: left; background-color: #cdcdcd; background-position: left center;"> 
     </div> 

     <span class="main_header" style="font-size: 21px; margin: 0;">Title</span> 
     <br /> 
     Subtitle 

    </div> 

    <div style="display:block; background-color: #efefef; height: 75px; padding: 5px; font-size: 12px;"> 
    Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here 
    </div> 
</div> 

<div style="border-top: 1px dashed black; display: inline-block; width: 250px; margin-bottom: 10px; margin-right: 10px; margin-top: 0;"> 

    <div style="height: 50px; padding-top: 2px; padding-bottom: 2px; text-align:right; font-size: 11px;"> 
     <div style="display: block; width: 80px; height: 50px; float: left; background-color: #cdcdcd; background-position: left center;"> 
     </div> 

     <span class="main_header" style="font-size: 21px; margin: 0;">Title</span> 
     <br /> 
     Subtitle 

    </div> 

    <div style="display:block; background-color: #efefef; height: 75px; padding: 5px; font-size: 12px;"> 
    Text here Text here Text here Text here Text here Text here Text here Text here Text 
    </div> 
</div>​ 

Answer 1

Wartość domyślna vertical-align jest baseline i kiedy są stosowane do bloków o różnych wysokościach, często jest niechciany.

Zastosowanie wartości top rozwiąże problem. Oto skrzypce robocze: http://jsfiddle.net/PhilippeVay/B2S4r/3/ (jak nie ma stylów w skrzypcach, ale tylko inline CSS, nawet nie będę starał się znaleźć sposób, aby dążyć do jednego po prawej)

Answer 2

szybkie rozwiązanie jest dodanie float:left do obu DIV ...

<div style=" border-top: 1px dashed black; display: inline-block; width: 250px; margin-bottom: 10px; margin-right: 10px; margin-top: 0; float: left;"> 
... 
</div> 

(i skorzystaj css;))

Answer 3

próbowałem tapetowania html na 1 bloku w następnym i pracował w/o problemie.

<div style=" border-top: 1px dashed black; display: inline-block; width: 250px; margin-bottom: 10px; margin-right: 10px; margin-top: 0;"> 

    <div style="height: 50px; padding-top: 2px; padding-bottom: 2px; text-align:right; font-size: 11px;"> 
     <div style="display: block; width: 80px; height: 50px; float: left; background-color: #cdcdcd; background-position: left center;"> 
     </div> 

     <span class="main_header" style="font-size: 21px; margin: 0;">Title</span> 
     <br /> 
     Subtitle 

    </div> 

    <div style="display:block; background-color: #efefef; height: 75px; padding: 5px; font-size: 12px;"> 
    Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here 
    </div> 
</div> 

<div style=" border-top: 1px dashed black; display: inline-block; width: 250px; margin-bottom: 10px; margin-right: 10px; margin-top: 0;"> 

    <div style="height: 50px; padding-top: 2px; padding-bottom: 2px; text-align:right; font-size: 11px;"> 
     <div style="display: block; width: 80px; height: 50px; float: left; background-color: #cdcdcd; background-position: left center;"> 
     </div> 

     <span class="main_header" style="font-size: 21px; margin: 0;">Title</span> 
     <br /> 
     Subtitle 

    </div> 

    <div style="display:block; background-color: #efefef; height: 75px; padding: 5px; font-size: 12px;"> 
    Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here 
    </div> 
</div> 

Można zobaczyć zaktualizowaną skrzypce tutaj: http://jsfiddle.net/B2S4r/6/

Answer 4

Jeśli dodać float:left obu div, Twój problem zostanie rozwiązany.

HTML:

<div class="article"> 
    <div class="header"> 
     <div class="grayBox"></div> 

     <span class="main_header">Title</span><br /> 
     Subtitle 
    </div> 

    <div class="content"> 
     Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here 
    </div> 
</div> 

<div class="article"> 
    <div class="header"> 
     <div class="grayBox"></div> 

     <span class="main_header">Title</span><br /> 
     Subtitle 
    </div> 

    <div class="content"> 
     Text here Text here Text here Text here Text here Text here Text here Text here Text 
    </div> 
</div>​ 

<div class="clear"></div> 

CSS:

.article { 
    border-top: 1px dashed black; 
    display: inline-block; 
    width: 250px; 
    margin-bottom: 10px; 
    margin-right: 10px; 
    margin-top: 0; 
    float:left;   
} 

.header { 
    height: 50px; 
    padding-top: 2px; 
    padding-bottom: 2px; 
    text-align:right; 
    font-size: 11px;  
} 

.main_header { 
    font-size: 21px; 
    margin: 0; 
} 

.grayBox { 
    display: block; 
    width: 80px; 
    height: 50px; 
    float: left; 
    background-color: #cdcdcd; 
    background-position: left center;  
} 

.content { 
    display:block; 
    background-color: #efefef; 
    height: 75px; 
    padding: 5px; 
    font-size: 12px; 
}​ 

.clear { 
    clear:both; 
}​ 

Live DEMO

Answer 5

To wydaje się być lepsze, czystsze rozwiązanie: (Example)

<div class="box"> 
    <hgroup> 
     <h2>Title</h2> 
     <h3>Subtitle</h3> 
    </hgroup> 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor 
     quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. 
     Aenean.</p> 
</div> 

<style type="text/css"> 
    .box { 
     border-top: 1px dashed black; 
     display:  inline-block; 
     width:   250px; 
     margin-bottom: 10px; 
     margin-right: 10px; 
     margin-top: 0; 
    } 

    .box hgroup { 
     height:   50px; 
     padding-top: 2px; 
     padding-bottom: 2px; 
     text-align:  right; 
     font-size:  11px; 
     border-left: 100px rgb(205, 205, 205) solid; 
    } 

    .box h2 { 
     font-size: 21px; 
     margin:  0; 
     font-weight: normal; 
    } 

    .box h3 { 
     font-weight: normal; 
    } 

    .box p { 
     background-color: #efefef; 
     height:   75px; 
     padding:   5px; 
     font-size:  12px; 
    } 
</style>