CSS浮动多个左浮动元素和一个右浮动元素答案

【问题标题】：CSS Float multiple left-floated elements and one right floatedCSS浮动多个左浮动元素和一个右浮动元素
【发布时间】：2011-11-06 18:54:57
【问题描述】：

我在使用花车时遇到了一些麻烦。我正在玩一个网站，我想使用媒体查询来响应不同的浏览器宽度。当它坐下时，页面显示 HTML 流，但是当浏览器加宽时，我希望 blockquote 包裹到 img 的右侧，但它只包裹到它之前的 p 元素。

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

这是我的 HTML 和 CSS 外观的示例：http://jsfiddle.net/tempertemper/MZWD9/12/

我希望扩大范围的网站在这里：http://tempertemper.net/portfolio

我确定我遗漏了一些明显的东西，但我无法弄清楚它是什么，我开始怀疑 float 是否只浮动两个相邻的元素。我想我可以在 img 和 p 标签周围放置一个 div，但我想让我的 HTML 保持整洁。

所有元素都有一个宽度，并且块引用绝对适合包含元素（即 li 的宽度足以包含所有元素及其填充、边框、边距等）。我已经尝试将所有元素都向左浮动，禁止我向右浮动的块引用。尝试对块引用之前的元素使用 clear:left。不开心。

谁能把我说的对吗？

谢谢，

马丁。

【问题讨论】：

如果你愿意，我可以写一些。这是一分钟的空白画布。更多的是我想知道我是否缺少基本的浮动规则——也许你只能并排浮动两个后续的 HTML 元素？我认为您可以将多个元素向左浮动，然后将最后一个元素向右浮动，它将与它们并排放置，从第一个元素在左侧的页面顶部开始。那有意义吗？抱歉 - 有点啰嗦！
如果您仍然需要 CSS，请告诉我。当前页面的链接是tempertemper.net/portfolio，因此您可以在页面变宽之前看到它的样子。我希望引用（这是实时站点上带有“推荐”类的 div - 我已经在我正在进行的工作站点上对其进行了完善）浮动到 img 的右侧。
不用担心，您可以浮动任意数量的元素。将它们全部向左浮动，它们将全部排成一行。我给你举个例子。
投资组合的链接给出了 404

标签： css responsive-design

【解决方案1】：

您可以将所有元素向左浮动以将它们全部水平排列。 Check this example.

您也可以给<ul> 一个宽度并将最后一个元素向右浮动，这样无论父元素的宽度如何，它都会保持在右侧。 Another example.

如果我能提供更多帮助，我会更新:)

在您的 cmets 之后，您应该修改 HTML 结构以在 img 或标题之后直接包含块引用。然后它会按照你的意愿行事。 Example.

【讨论】：

嗨凯尔，感谢您的帮助。我看过了，它没有做我想要的。我已将示例上传到 jsfiddle 供您查看：link
我希望将“这是一个引用”文本放在右上角，靠近标题或图片...谢谢
只是为了确保我理解正确，当网站更宽时，您希望块引用在 img 旁边吗？
没错，是的。所以它读作整个 li 右侧的一列
如果可能的话，我不想更改 HTML，因为它有双重用途。一旦我开始制作智能手机版本，就有三重用途。

【解决方案2】：

使用您拥有的 HTML，这是不可能的。

文档流以 HTML 顺序发生。这意味着，在正常情况下，一个元素只能影响 HTML 中之后的元素，就定位而言。

float: right，例如，将元素向右移动，任何跟随它的元素将围绕它向左流动。 clear: left 将阻止元素流到它所应用的元素的左侧。

我可能会建议将您的 HTML 分成多个块，然后将它们浮动。

然后，您可以从 CSS 中删除 h3, img, p 选择器和规则，并将其替换为 .content 的类似规则

一般来说，我建议阅读文档流float、clear 和position。它们往往是过度使用的属性，您似乎在这里过度使用了它们。

代码如下：

        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>

哦，给你一个小提琴：http://jsfiddle.net/2bedr/1/

【讨论】：

请注意，虽然这会改变 HTML，但不会改变元素的顺序，因此应保留您的多用例。
谢谢 Ryan- 我担心这会是一个额外的 div/section！

【解决方案3】：

解决方案非常简单。比你想象的还要简单。

改变：

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

到这里：

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

通过首先声明块引用（并使其向右浮动），您首先告诉元素向右浮动。我知道这不合逻辑，但这是正确的答案……我自己也经历过多次。

【讨论】：