CSS放置3块彼此相邻 [英] CSS placing 3 blocks next to each other

问题描述

我是CSS的初学者，所以这是probaly一个愚蠢的问题，但仍然我不能弄清楚:)。我试图用百分比放置3块彼此相邻。我到目前为止是：

I'm a beginner in CSS, so this is probaly a silly question but still I can't figure it out :). I'm trying to place 3 blocks next to each other with percentages. What i have so far is:

    #notification {
        display: inline-block;
        height: 100px;
        width: 100%;
    }

    #date_pane{
        display: inherit;
        height: inherit;
        width:15%;
    }

    #text_pane{
        display: inherit;
        height: inherit;
        width: 75%;         
    }

    #arrow_pane{
        display: inherit;
        height: inherit;
        width:10%;          
    }

最后一个正方形位于下一行。我不知道为什么？有人知道发生了什么吗？

The last square stands on the next line. I don't know why? Does somebody know what this happens?

我的HTML是：

<div id="notification">
    <div id="date_pane"></div>
    <div id="text_pane"></div>
    <div id="arrow_pane"></div>
</div>

这里是 Fiddle

推荐答案

使用

#notification{
     font-size:0;
}

然后将字体设置为所有窗格中所需的大小。或者消除div之间的空格，例如：

then set the font to the size you want in all the panes. That or eliminate the whitespace between the divs like such:

<div id="notification">
    <div id="date_pane">
    </div><div id="text_pane">
    </div><div id="arrow_pane">
    </div>
</div>

这里的问题是div之间的新行被解释为空格现在是inline-block，它们被当作字），因此将字体设置为0会使空格不存在。

The problem here is that the new line between the divs is being interpreted as white-space (since they are now inline-block they are treated as "words") so setting font to 0 makes the space non-existent.

http://jsfiddle.net/vfwKV/1/

这篇关于CSS放置3块彼此相邻的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！