HTML - 如何使这些 div 保持在一行中？ [复制]

Posted 2023-03-05

【中文标题】HTML - 如何使这些 div 保持在一行中？ [复制]

【英文标题】：HTML - How to make these divs stay in one line? [duplicate]

【发布时间】：2018-07-21 18:02:04

【问题描述】：

我想在一行中包含三个 div 元素。如果其中有这么多元素，我希望第二个是可滚动的，并且我希望侧面的其他两个 div 具有固定宽度，并且我希望中间的 div 占据所有剩余的空间（水平） .

无论我尝试什么，我都无法让第三个 div 保持在同一行而不破坏第二个 div 的外观。我怎样才能让它工作？

<div style="padding-left:40px; padding-bottom:3px; float:left;" onclick="select(this);" >
    <img style="height:75px; margin-top:20px;" src="https://www.gravatar.com/avatar/68e58b96b428989475e4f3042db71893?s=64&d=identicon&r=PG&f=1"></img>
</div>
<div style="overflow-x: scroll; overflow-y: hidden; height=150px; white-space: nowrap; margin-right: 130px; margin-left:130px; border-radius: 10px; box-shadow:inset 0 0 10px #000000;" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img style="height:75px; margin: 20px;" src="https://www.gravatar.com/avatar/68e58b96b428989475e4f3042db71893?s=64&d=identicon&r=PG&f=1"></img>
    <img style="height:75px; margin: 20px;" src="https://www.gravatar.com/avatar/68e58b96b428989475e4f3042db71893?s=64&d=identicon&r=PG&f=1"></img>
    <img style="height:75px; margin: 20px;" src="https://www.gravatar.com/avatar/68e58b96b428989475e4f3042db71893?s=64&d=identicon&r=PG&f=1"></img>
    <img style="height:75px; margin: 20px;" src="https://www.gravatar.com/avatar/68e58b96b428989475e4f3042db71893?s=64&d=identicon&r=PG&f=1"></img>
    <img style="height:75px; margin: 20px;" src="https://www.gravatar.com/avatar/68e58b96b428989475e4f3042db71893?s=64&d=identicon&r=PG&f=1"></img>
</div>
<div style="padding-bottom:3px; float:right;" onclick="select(this);" >
    <img style="height:75px; margin-top:20px;" src="https://www.gravatar.com/avatar/68e58b96b428989475e4f3042db71893?s=64&d=identicon&r=PG&f=1"></img>
</div>

【问题讨论】：

除了上面的所有链接，最好考虑使用 flex 解决方案。它会轻松解决您的问题

【参考方案1】：

您可以通过添加一些类来简单地制作它，例如为所有具有样式规则“display: inline-block; float: left;”的 div 设置“inline”

【讨论】：

这与我想要的完全相反！我希望他们保持一致。请考虑添加一个可运行的脚本。我试过了，它对我不起作用。

【参考方案2】：

在所有三个 div 标签中使用float:left。

演示：

<div style="padding-left:40px; padding-bottom:3px; float:left;" onclick="select(this);" >
    <img style="height:75px; margin-top:20px;" src="https://www.gravatar.com/avatar/68e58b96b428989475e4f3042db71893?s=64&d=identicon&r=PG&f=1">
</div>
<div style="float:left;overflow-x: scroll; overflow-y: hidden; height=150px; white-space: nowrap;width:240px; border-radius: 10px; box-shadow:inset 0 0 10px #000000;" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img style="height:75px; margin: 20px;" src="https://www.gravatar.com/avatar/68e58b96b428989475e4f3042db71893?s=64&d=identicon&r=PG&f=1">
    <img style="height:75px; margin: 20px;" src="https://www.gravatar.com/avatar/68e58b96b428989475e4f3042db71893?s=64&d=identicon&r=PG&f=1">
    <img style="height:75px; margin: 20px;" src="https://www.gravatar.com/avatar/68e58b96b428989475e4f3042db71893?s=64&d=identicon&r=PG&f=1">
    <img style="height:75px; margin: 20px;" src="https://www.gravatar.com/avatar/68e58b96b428989475e4f3042db71893?s=64&d=identicon&r=PG&f=1">
    <img style="height:75px; margin: 20px;" src="https://www.gravatar.com/avatar/68e58b96b428989475e4f3042db71893?s=64&d=identicon&r=PG&f=1">
</div>
<div class="last" style="padding-bottom:3px; float:left;" onclick="select(this);" >
    <img style="height:75px; margin-top:20px;" src="https://www.gravatar.com/avatar/68e58b96b428989475e4f3042db71893?s=64&d=identicon&r=PG&f=1">
</div>

【讨论】：

把 float 放在所有的 div 中

你添加了 width:240px;但我说我希望宽度是动态的。我不想用 javascript 来做。

好的，等我改一下

如果你想要动态宽度，那么在 % 中给出宽度