22

私はここで何かを見落としていると確信していますが、それを解決することはできません。2番目のインラインブロックdivの上に空白があります。これは、右側のdivの「texthere」の長さが左側の長さよりも短い場合にのみ発生します。

jsFiddle：http ://jsfiddle.net/B2S4r/2/ （HTMLビューを広くして、並べて表示する必要があります）

<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>​
4

5 に答える 5

66

のデフォルト値はvertical-alignでbaselineあり、さまざまな高さのブロックに適用すると、多くの場合不要になります。

の値を適用するとtop、問題が解決します。動作するフィドルは次のとおりです。http：//jsfiddle.net/PhilippeVay/B2S4r/3/（フィドルにはスタイルシートがなく、インラインCSSしかないため、右側のスタイルシートを目指す方法を見つけることすらしません）

于 2012-06-19T19:05:36.747 に答える
4

これは、より優れた、よりクリーンなソリューションのようです:(例）

<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>
于 2012-06-19T19:17:53.497 に答える
1

float:left両方のdivに追加すると、問題は解決します。

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;
}​

ライブデモ

于 2012-06-19T19:15:57.890 に答える
0

簡単な解決策は、両方のdivにを追加するfloat:leftことです...

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

（そしてcssを使用してください;））

于 2012-06-19T19:11:57.850 に答える
0

次のブロックの最初のブロックにhtmlを貼り付けてみましたが、問題なく動作しました。

<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>

ここで更新されたフィドルを見ることができます：http：//jsfiddle.net/B2S4r/6/

于 2012-06-19T19:15:19.743 に答える