CSS将3个块相邻放置_Css - Fatal编程技术网

CSS将3个块相邻放置

css

CSS将3个块相邻放置,css,Css,我是CSS的初学者，所以这可能是一个愚蠢的问题，但我仍然无法理解：）。我试着用百分比将3个街区相邻放置。到目前为止，我得到的是： #notification { display: inline-block; height: 100px; width: 100%; } #date_pane{ display: inherit; height: inherit; width:15

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

这里有一个用法：

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

使用：

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

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

u必须添加浮动：左

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

您必须添加浮动：左

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

你的问题很常见。因为75%15%和10%加起来等于100%，所以块应该是内联的。然而，这在实践中并不起作用。如果你改变你的%来留下至少2%的摆动空间，这将很好。试试74%14%和10%

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

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

您的问题很常见。因为75%15%和10%加起来等于100%，所以块应该是内联的。然而，这在实践中并不起作用。如果你改变你的%来留下至少2%的摆动空间，这将很好。试试74%14%和10%

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

不要忘记，如果您使用float:left，请按照其他人的建议清除您的float。

使用

#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之间的新行被解释为空白（因为它们现在是内联块，它们被视为“字”），所以将font设置为0会使空白不存在

使用

#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之间的新行被解释为空白（因为它们现在是内联块，它们被视为“字”），所以将font设置为0会使空白不存在

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

然而，我想对Don的答案进行更多的扩展/解释，因为对于CSS、HTML和DOM元素的新手来说，这可能不太明显

两者之间是有区别的

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

2）默认的长方体模型向总宽度添加填充和边框。如果您使用精确的宽度（就像您正在做的那样），但决定使用边框或在框内添加一些填充，这将导致该框实际增长大于预期，将端块推到上方并环绕到下一行

我希望这有帮助

除了上面关于元素之间的文本节点的注释外，我还发现了一种非常有创意的HTML注释用法，以避免“文本节点空白”问题。我在浏览AnEventApart.com网站时发现了这个

假设您像这样标记HTML

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

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

当然，这会向标记中注入额外的HTML，但是如果您处理的是10、20或“很多”项的列表，那么这是一种更具可读性的方法

这将由喜欢阅读源代码的人来完成。但是有了Chrome的WebDeveloper工具栏这样的工具，它们可以通过缩进和折叠自动设置标签的格式，因此您应该能够删除空白并将其用于源代码阅读

我只是想指出这一点，因为这仍然是一个有趣的创意

干杯

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