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

在所有三个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>

Answer 2

您可以通过为样式规则“display：inline-block; float：left;”添加一些类来为所有div添加一些类，例如“inline”，

HTML - 如何使这些div保持一致？

2 个答案: