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

Question

这个问题已经在这里有了答案：

• 如何在另一个div内对齐3个div（左/中/右）？ 18个答案
• 如何使用CSS并排浮动3个div？ 15个答案
• 同一行中不同宽度的div 3个答案
• 扩展div来填充剩余宽度 21个答案

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

DEMO：

 <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

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