我试图在 html 中显示一系列 div。
每个 div 都有一个我想在左侧占据的图像。每个 div 还将包含一组不同长度的信息，我想将其显示在该图像的右侧。
我遇到的问题是向左浮动的图像相互重叠。我想要的是让每个 .item div 按顺序显示在页面下方，但它们会慢慢地向右爬行，因为每个图像都会自己捕捉。
请注意，这是基于真实世界的示例，图像的高度和细节部分中的行数可能会有所不同，因此无法提前知道两者中的哪一个会比另一个用于任何给定的 .item div。
我确信我曾经知道如何做到这一点，但我终究无法解决。我要么是愚蠢的，要么只是非常需要咖啡因。我涉足网页设计显然已经太久了。
示例代码如下。
<html>
<head>
<title>Float Left Sample</title>
<style>
.sidebar {
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<div class="sidebar">
<img src="https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" alt="Sample Image" />
</div>
<div class="details">
<div>Details Line One</div>
<div>Details Line Two</div>
<div>Details Line Three</div>
</div>
</div>
<div class="item">
<div class="sidebar">
<img src="https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" alt="Sample Image" />
</div>
<div class="details">
<div>Details Line One</div>
<div>Details Line Two</div>
<div>Details Line Three</div>
</div>
</div>
<div class="item">
<div class="sidebar">
<img src="https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" alt="Sample Image" />
</div>
<div class="details">
<div>Details Line One</div>
<div>Details Line Two</div>
<div>Details Line Three</div>
</div>
</div>
<div class="item">
<div class="sidebar">
<img src="https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" alt="Sample Image" />
</div>
<div class="details">
<div>Details Line One</div>
<div>Details Line Two</div>
<div>Details Line Three</div>
</div>
</div>
</div>
</body>
</html>
最佳答案
像这样添加CSS:
.item {
float: left;
}
.details {
float: right;
}
.container {
float: left;
width: 300px;
}
第二个选项是:
.sidebar, .details {
float: left;
}
.item{
float: left;
width:100%;
}
关于html - 放置在 div 序列中时如何正确地将图像向左浮动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23533798/