gpt4 book ai didi

CSS 显示 : inline; float: left, 但 div block 不会彼此靠近

转载 作者:太空宇宙 更新时间:2023-11-04 05:32:35 25 4
gpt4 key购买 nike

有谁知道如何让 Block 3 不在 Block2 之下。我希望 Block3 显示在 Block 1 下方,然后 Block 4 会出现在 Block 3 的右侧。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <!-- don't use closing slash in meta tag, it breaks HTML4.01 transitional -->
<title>Test</title>

<style type="text/css">
/* in the style below the width and border and margin must not be modified */
div.float_box {display: inline; float: left; width: 100px; border: 1px solid #ff0000; margin: 10px;}
p.clear {clear: both; height: 0px;}
</style>

</head><body>

<!-- This outside div must not be touched or modified -->
<div style="width: 300px; padding: 10px; border: 1px dashed #cccccc;">
<!-- Blocks' height must not be modified by adding contents or setting styles -->
<div class="float_box">Block 1<br><br><br><br><br></div>
<div class="float_box">Block 2<br><br></div>
<div class="float_box">Block 3<br><br><br><br><br><br><br><br></div>
<div class="float_box">Block 4<br><br></div>
<p class="clear"></p>
</div>

</body></html>

谢谢!

这显然只是一个示例,但我需要一个独立于 block 长度和 block 数的解决方案。有人建议在 block 3 上使用“clear: both”,但这只能解决这种特殊情况,如果我有另一个高度相同或长于 block 3 的 block 5 并且在另一个 block 6 之后,问题会出现吗再次修复它,我必须在 block 5 上手动设置清除。我需要一个通用的解决方案,因为我事先不知道 block 的长度和数量(因为它们是从数据库动态生成的)。

我希望看到我的所有 block 都显示为一个靠近另一个(仅由我设置的边距 10xp 分隔),同时适合外部 div 300px 框。 此外,300px 的 otside div 框可能会扩展,内部的 block 应该重新定位主题以适应新的大小(例如通过适应三/四列)。

最佳答案

您应该能够向 Block 3 div 添加另一个类(“clear”?),其定义为:

div.clear { clear:both; }

当然,CSS 并不总是像您最初期望的那样运行...

关于CSS 显示 : inline; float: left, 但 div block 不会彼此靠近,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2358035/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com