Question

我有两个浮动列表，一个来自右边，一个来自左边。左侧浮动列表位于顶部，右侧位于底部。我希望像这样在左下方的权利：

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>

Answer 1

它不起作用的原因可能是因为你有宽度：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>

Answer 2

好的，所以这应该有效。

DEMO

现在，为什么它以前不起作用？

简单。这是因为你订购div的方式。我们来看看你的原始代码：

<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>

这是什么要求浏览器解释？它要求将第一个div尽可能地放置在最右边，然后将下面的三个div放在线上但是要放在最左边。为什么不起作用？因为这试图将所有4个div放在一行中。它是不能的，因为你的第一个div已经位于最右边，导致任何不适合左边的div被放置在一行下面（这也是你必须使用边距的原因 - 顶部，以确定最右边的div）。

简单。看看这段代码：

<div class="wrapper">
    <div class='small'></div>
    <div class='small'></div>
    <div class='small'></div>
    <div class='smallR'></div>
</div>

首先，我更换了div的顺序（这有助于长期运行，因为它确保前三个将位于第一行，假设您没有超过前三个容器的整个宽度）。其次，我改变了margin-top代码，将div准确定位在我想要的位置，这样它就不会触及任何其他div。这是CSS代码：

.smallR {
    height:20px;
    width:65px;
    border:solid;
    float:right;
    margin-right:10px;
    margin-top:10px;
}

就这样，它完成了:)现在，如果没有任何意义，请告诉我，因为我可以进一步深入了解一些事情。另外，我建议调查Almanac给你一些交易技巧：）

两个浮动列表 - 一个在另一个之下

2 个答案: