Question

我是CSS的初学者，所以这可能是一个愚蠢的问题，但我仍然无法弄明白:)。我试图用百分比将3个区块放在一起。到目前为止我所拥有的是：

    #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%;          
    }

最后一个方格站在下一行。我不知道为什么？有人知道这会发生什么吗？

我的HTML是：

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

这是Fiddle

Answer 1

使用

#notification{
     font-size:0;
}

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

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

这里的问题是div之间的新行被解释为空格（因为它们现在是内联块，它们被视为“单词”），因此将字体设置为0会使空格不存在。 / p>

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

Answer 2

我认为@Don的回答最适合你所遇到的实际问题，而@Pavel和@ YD1m对“内联”块有很好的（流行/传统）替代方案。

但是，我想更多地解释一下Don的回答，因为对于CSS，HTML和DOM元素的新手来说，这可能不那么明显。

之间存在差异

<div>
    <element />
    <element />
    <element />        
</div>

和

<div><element /><element /><element /></div>

在某种意义上，换行符，制表符或空格的额外源格式被视为特殊的“空白元素”。内联元素的规则是浏览器在内联元素之间识别最多一个空格空间。

换句话说，您可以考虑是否与文本类似：

<div>
    A   B      C
</div>
<!-- or -->
<div>
    A
    B
    C
</div>

我们知道浏览器只会在每个字符之间输出一个空格或空格（除非使用预先格式化的样式）。但是，如果我们真正想要的是让“A”，“B”和“C”相互接触，我们需要写成：

<div>ABC</div>

使用“inline-block”时，这是您的示例中发生的情况。你的内联元素遵循内联元素的规则并添加额外的空格，这就是@Don在他说的时候的意思

将所有窗格div放在同一行

所以你想让你的HTML像这样：

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

或者，正如@Pavel和@ YD1m所提到的，从使用inline-block切换到浮动内部元素。这可能是大多数前端开发人员/设计人员最常见的事情。

如果你浮动内部元素，有两点需要注意：

1）使用clearfix技术清除容器元素。我喜欢nicolasgallagher.com's micro solution但是如果你使用像Twitter Bootstrap这样的工具，你可能已经拥有了CSS。你的代码看起来像这样：

<div id="" class="clearfix">
 ...
</div>

2）默认的盒子模型为整体宽度添加了填充和边框。如果你使用精确的宽度（就像你正在做的那样）但决定使用边框或在框内添加一些填充，这将导致该框实际增长超过预期，推动结束块并包裹到下一个线。

我希望有所帮助！

作为我上面关于元素之间的文本节点的评论的补充，我偶然发现了HTML注释的创造性使用以避免“文本节点空白”问题。我在查看AnEventApart.com的网站时发现了这一点。

让我们说你像这样标记你的HTML

<div>
    <element />
    <element />
    <element />        
</div>

这将在使用inline-block时创建“空白区域”，因为元素之间有空白区域，内联元素之间的空白区域将始终显示至少一个空格（如字符）。好吧，为了避免它并且仍然保留半格式化的HTML以供开发人员/设计者阅读，你可以使用HTML注释来“包裹”空白。

<div><!--
    --><element /><!--
    --><element /><!--
    --><element /><!--    
--></div>

上述技巧在技术上消除了空格，因为一个元素终止于注释，该注释终止于元素。所有新行和空白之间的空格都被视为评论的一部分。

当然，这会在你的标记中注入额外的HTML，但是如果你要处理10,20或“很多”项目的列表，这是一种更易读的方法。

这可以由喜欢阅读其源代码的人来完成。但是使用Chrome的Web开发人员工具栏等工具，他们会自动设置缩进和折叠标签，因此您应该只需删除空格并将其用于源代码阅读。

我只是因为它仍然是一个有趣的创意。

干杯！

Answer 3

使用：

#date_pane , #text_pane ,#arrow_pane {
  float: left;
}

sample at jsfiddle

Answer 4

你必须添加float：left

#date_pane, #text_pane, #arrow_pane {
    float: left;
}

http://jsfiddle.net/p2x6G/

Answer 5

从技术上讲，你所要求的是不可能的。块元素不是彼此相邻的。要么必须将它们包装在表类型环境中，要么如前所述，将其转换为内联块元素。

Answer 6

你的问题很常见。我认为75％15％和10％加起来是100％所以块应该是内联的。然而，这在实践中不起作用。如果你改变你的％'以留下至少2％的摆动空间它将工作正常。尝试74％14％和10％

你最好使用float或者flexbox。但你可以让它发挥作用。

不要忘记，如果你使用float：left，因为其他人建议清除你的花车。

CSS将3个区块彼此相邻放置

6 个答案: