第二个内联块div上方的空白区域

时间：2012-06-19 18:59:16

标签： html css

我确信我在这里忽略了一些东西，但无法解决这个问题。我的第二个内联块div上面有空白区域，只有当右侧div中的“text here”长度小于左侧时，才会出现这种情况。

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

5 个答案:

答案 0 :(得分：60)

vertical-align 的默认值为baseline，当应用于不同高度的块时，通常不需要。

应用 top 的值可以解决您的问题。这是一个工作小提琴：http://jsfiddle.net/PhilippeVay/B2S4r/3/（因为你的小提琴中没有样式表但只有内联CSS，我甚至不会试图找到如何瞄准右边的那个）

答案 1 :(得分：4)

这似乎是一个更好，更清洁的解决方案：（ 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>

答案 2 :(得分：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;））

答案 3 :(得分：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/

答案 4 :(得分：0)

如果您向两个div添加float:left，您的问题将得到解决。

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

相关问题
最新问题