22

我确定我在这里忽略了一些东西，但无法解决。我的第二个内联块 div 上方有空白，只有当右侧 div 中的“文本此处”长度小于左侧时，才会出现这种情况。

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

一个快速的解决方案是float:left在两个 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>

（请使用 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 回答