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

Question

我想在一行中包含三个 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>

Answer 1

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

Answer 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>