gpt4 book ai didi

css - 两个 float 列表 - 一个在另一个下面

转载 作者:太空宇宙 更新时间:2023-11-03 18:25:43 24 4
gpt4 key购买 nike

我有两个 float 列表,一个在右边,一个在左边。左侧 float 列表在顶部,右侧在底部。我希望右侧像这样位于左侧下方:

enter image description here

但是,我的代码产生了这个:

enter image description here

如何强制左浮动列表不中断?为什么它还是坏了?这是我的代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Floats dont like me.</TITLE>
<style type="text/css" media="screen">
.small { height:20px;width:65px;border:solid;float:left;margin-left:10px;margin- top:10px }
.smallR { height:20px;width:65px;border:solid;float:right;margin-right:10px;margin-top:50px; }
</style>
</HEAD>
<BODY>
<div style='width:300px;height:100px;border:solid'>
<div class='smallR' ></div>
<div class='small' ></div>
<div class='small' ></div>
<div class='small' ></div>
</div></BODY></HTML>

最佳答案

它不起作用的原因可能是因为你有 width: 300px;将它更改为 360px 左右,看看它是否有效。如果它有效,您可以随时降低 px,直到它按照您想要的方式精确工作。

<div style='width:300px;height:100px;border:solid'> // change the width to like 360px;
<div class='smallR' ></div> // if for some reason changing width: 300px to 360px; doesn't work then put this div as the last one
<div class='small' ></div>
<div class='small' ></div>
<div class='small' ></div>
//would put here if changing width don't work
</div>

关于css - 两个 float 列表 - 一个在另一个下面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20850275/

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