CSS CSS浮动多个左浮动元素和一个右浮动元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7243390/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Float multiple left-floated elements and one right floated
提问by Martin
I'm having a bit of trouble with floats. I'm playing with a site that I want to make a bit responsive using media queries for varying browser widths. As it sits, the page displays with the flow of the HTML, but when the browser is widened, I want the blockquote to wrap up onto the right of the img, but it only wraps as far as the p element immediately before it.
我在浮动方面遇到了一些麻烦。我正在玩一个网站，我想使用媒体查询对不同的浏览器宽度进行响应。就这样，页面显示为 HTML 流，但是当浏览器加宽时，我希望块引用包含在 img 的右侧，但它只包含在它之前的 p 元素。
Here's the HTML:
这是 HTML：
<ul>
<li>
<h3>Title</h3>
<img src="images/image" />
<p>This is some text.</p>
<p>Here's some more text.</p>
<p>And heres yet another block of text.</p>
<blockquote>This is a quote.</blockquote>
<a>A link</a>
</li>
</ul>
Here's an example of how my HTML and CSS look: http://jsfiddle.net/tempertemper/MZWD9/12/
这是我的 HTML 和 CSS 外观的示例：http: //jsfiddle.net/tempertemper/MZWD9/12/
The site that I'm looking to make wider is here: http://tempertemper.net/portfolio
我希望扩大的网站在这里：http: //tempertemper.net/portfolio
I'm sure I'm missing something obvious but I can't work out what it is and I'm starting to wonder if float only floats two adjacent elements. I suppose I could put a div around the img and p tags, but I want to keep my HTML nice and clean.
我确定我遗漏了一些明显的东西，但我无法弄清楚它是什么，我开始怀疑 float 是否只浮动两个相邻的元素。我想我可以在 img 和 p 标签周围放置一个 div，但我想让我的 HTML 保持整洁。
All elements have a width and the blockquote definitely fits in the containing element (ie. the width of the li is sufficient to contain all of the elements and their padding, borders, margins, etc.). I've tried floating all of the elements left, bar the blockquote which I've floated right. Tried using clear:left for the elements preceding the block quote. No joy.
所有元素都有一个宽度，并且块引用绝对适合包含元素（即 li 的宽度足以包含所有元素及其填充、边框、边距等）。我尝试将所有元素向左浮动，禁止我向右浮动的块引用。尝试对块引用之前的元素使用 clear:left 。没有喜悦。
Can anyone put me right?
任何人都可以让我正确吗？
Thanks,
谢谢，
Martin.
马丁。
回答by Ryan Kinal
With the HTML you have, this is not possible.
使用您拥有的 HTML，这是不可能的。
The flow of a document happens in HTML order. This means that, under normal circumstances, an element can only affect elements that come afterit in the HTML, as far as positioning goes.
文档流以 HTML 顺序发生。这意味着，在正常情况下，就定位而言，一个元素只能影响HTML 中位于它之后的元素。
float: right, for example, will move the element to the right and any elements following it will flow around it to the left. clear: leftwill prevent elements from flowing to the left of the element it is applied to.
float: right，例如，将元素向右移动，任何跟随它的元素将围绕它向左流动。clear: left将阻止元素流向应用它的元素的左侧。
I might suggest breaking your HTML into blocks, and floating those.
我可能会建议将您的 HTML 分成块，然后浮动它们。
You could then remove the h3, img, pselector and rule from your CSS, and replace it with a similar rule for .content
然后，您可以h3, img, p从 CSS 中删除选择器和规则，并用类似的规则替换它.content
In general, I would recommend reading up on document flow, float, clear, and position. They tend to be over-used properties, and it seems you were over-using them here.
一般来说，我建议阅读文档流float、clear、 和position。它们往往是过度使用的属性，看来您在这里过度使用了它们。
Here is the code:
这是代码：
ul {
width: 200px;
}
.content {
float: left;
width: 100px;
}
blockquote {
float: right;
width: 50px;
}
a {
float: left;
clear: both;
} <ul>
<li>
<h3>Title</h3>
<div class="content">
<img src="images/image" />
<p>This is some text.</p>
<p>Here's some more text.</p>
<p>And heres yet another block of text.</p>
</div>
<blockquote>This is a quote.</blockquote>
<a>A link</a>
</li>
</ul>Oh, and a fiddle for you: http://jsfiddle.net/2bedr/1/
哦，还有一个给你的小提琴：http: //jsfiddle.net/2bedr/1/
回答by Luuk
The solution is quite simple. Even more simple then you thought.
解决方法很简单。比你想象的还要简单。
change:
改变：
<ul>
<li>
<h3>Title</h3>
<img src="images/image" />
<p>This is some text.</p>
<p>Here's some more text.</p>
<p>And heres yet another block of text.</p>
<blockquote>This is a quote.</blockquote>
<a>A link</a>
</li>
</ul>
To this:
对此：
<ul>
<li>
<h3>Title</h3>
<blockquote>This is a quote.</blockquote>
<img src="images/image" />
<p>This is some text.</p>
<p>Here's some more text.</p>
<p>And heres yet another block of text.</p>
<a>A link</a>
</li>
</ul>
By stating the blockquote first (and float it right) you first TELL the element to float right. I know this is not logical, but it is the right answer... Had this multiple times myself.
通过首先声明块引用（并将其向右浮动），您首先告诉元素向右浮动。我知道这不合逻辑，但这是正确的答案......我自己多次这样做。
回答by Kyle
You can float all of your elements left to line them all up horizontally. Check this example.
您可以将所有元素向左浮动以将它们水平排列。检查这个例子。
You can also give the <ul>a width and float the last element right so it will remain right no matter the width of the parent element. Another example.
您还可以给<ul>a 宽度并向右浮动最后一个元素，这样无论父元素的宽度如何，它都会保持正确。另一个例子。
If there's more I can help with, I will update :)
如果有更多我可以提供帮助，我会更新:)
After your comments, you should revise the HTML structure to have the blockquote directly after the img or title. Then it will behave as you wish. Example.
在您发表评论之后，您应该修改 HTML 结构以在 img 或标题之后直接使用块引用。然后它会按照你的意愿行事。例子。
