1

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

这是一个小提琴

4

6 回答 6

5

采用

#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 会使空格不存在。

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

于 2013-06-26T13:05:49.640 回答
2

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

但是，我想进一步扩展/解释 Don 的回答，因为对于 CSS、HTML 和 DOM 元素的新手来说，这可能并不那么明显。

之间有区别

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

和

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

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

换句话说，你可以把 if 想成类似于 text ：

<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 的微型解决方案，但如果您使用 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 Developer Toolbar 之类的工具，它们会自动格式化带有缩进和折叠的标签，因此您应该能够删除空白并将其用于源代码阅读。

我只是通过我会指出这一点，因为它仍然是一个有趣的创意。

干杯!

于 2013-06-26T13:48:22.773 回答
1

采用：

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

jsfiddle 的示例

于 2013-06-26T13:00:38.980 回答
1

你必须添加浮动：左

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

http://jsfiddle.net/p2x6G/

于 2013-06-26T13:02:11.583 回答
0

好吧，从技术上讲，您要问的是不可能的。块元素并非设计为彼此相邻。它们要么必须包装在表格类型的环境中，要么如先前的回答所述，转换为 inline-block 元素。

于 2013-06-26T13:00:56.763 回答
0

你的问题很常见。我认为 75% 15% 和 10% 加起来是 100%，所以这些块应该是内联的。然而，这在实践中不起作用。如果您更改 % 以留出至少 2% 的回旋余地，它将正常工作。尝试 74% 14% 和 10%

你会更好地使用浮动或弹性盒。但是你可以让它工作。

不要忘记，如果您像其他人建议的那样使用 float:left 来清除您的浮动。

于 2013-06-26T13:04:27.803 回答