我在 HTML+CSS 中创建 3 列时遇到问题
这是html代码:
<div class="views-field-field-pdf-fid"></div>
<div class="views-field-field-content-value"></div>
<div class="views-field-field-image-fid"></div>
<div class="views-field-title"></div>
<div class="views-field-field-date-value"></div>
我想要的是 3 列:
1st column: title, date-value
2nd column: image-fid
3rd column: content-value, pdf-fid
到目前为止，我已尝试将 float:right 属性添加到 content-value、pdf-fid 和 image-fid。不幸的是，我不能将 content-value 和 pdf-fid 放在同一列中。
附言。我可以交换 html 代码中的 div，但不能使用父 div 对它们进行分组。 谢谢
最佳答案
您需要对 div 进行排序并结合使用 float:left/float:right 和 clear:left/清除:正确。也许对中间列使用绝对定位。
如果 title 总是小于 content，这样的事情应该有效:
<!doctype html>
<html>
<head>
<style type="text/css">
div {
width: 32%;
margin: 0 1% 0;
padding: 0;
}
</style>
</head>
<body>
<div class="views-field-field-content-value" style="background-color: #000; height: 300px; float: right;"></div>
<div class="views-field-title" style="background-color: #333; height: 100px; float: left;"></div>
<div class="views-field-field-image-fid" style="background-color: #666; height: 400px; position: absolute; top: 0; left: 33%;"></div>
<div class="views-field-field-date-value" style="background-color: #ccc; height: 100px; float:left; clear: left;"></div>
<div class="views-field-field-pdf-fid" style="background-color: #999; height: 100px; float: right; clear: right;"></div>
</body>
</html>
关于html - 如何在 HTML+CSS 中创建 3 列并在第三列中对 2 个 div 元素进行分组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4880351/