CSS浮动：多个左浮动元素和一个右浮动元素

Question

CSS浮动：多个左浮动元素和一个右浮动元素

5

我在使用浮动布局时遇到了一些问题。我正在处理一个网站，希望使用媒体查询使其更加响应式以适应不同的浏览器宽度。目前页面显示的是HTML的流程，但是当浏览器变宽时，我希望引用块向右侧缩进到图片的右侧，但它只会缩进到紧挨着它的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为引用块之前的元素。还是没有成功。

有人能帮我解决吗？

谢谢，

马丁。

- Martin

如果您想的话，我可以写一些。现在它是一张空画布。我更在于想知道是否我漏掉了某个基本的浮动规则-也许你只能将两个相邻的HTML元素侧边浮动？我曾以为你可以浮动左侧多个元素，然后将最后一个元素向右浮动，并且它会坐落在它们旁边，从页面顶部开始，第一个元素在左边。这有意义吗？抱歉-这有点冗长！ - Martin

如果您仍需要CSS，请告诉我。当前页面的链接为http://tempertemper.net/portfolio，因此您可以在页面扩展之前查看其外观。我希望引用（在现场站点上具有“testimonial”类的div-我已在我的正在进行的工作站点上对其进行了改进）浮动到img的右侧。 - Martin

没问题，你可以浮动任意数量的元素。将它们全部向左浮动，它们就会在同一行上排列。我会为你做一个例子。 - Kyle

作品集链接出现了404错误。 - Bryan Oakley

3个回答

4

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

更改：

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

首先声明 blockquote 并将其向右浮动，你就是在告诉元素向右浮动。我知道这并不合乎逻辑，但这却是正确的答案...... 我自己也多次遇到过这种情况。

- Luuk

0

你可以将所有元素向左浮动以使它们在水平方向上对齐。查看此示例。

你还可以给<ul>设置宽度并将最后一个元素向右浮动，这样它将始终保持在右侧，无论父元素的宽度如何。另一个示例。

如果还有需要帮助的地方，请让我知道，我会进行更新 :)

在你的评论之后，你应该修改HTML结构，使得 blockquote 直接跟在 img 或 title 后面，然后它就会按照你所希望的方式工作了。示例。

- Kyle

嗨，Kyle，谢谢你的帮助。我看了一下，它没有做我想要的事情。我已经上传了一个示例到 jsfiddle，供您查看：链接 - Martin

我希望“this is a quote”文本位于右上方，靠近标题或图像...谢谢。 - Martin

只是为了确保我理解正确，当网站宽度较大时，您希望 blockquote 与 img 并排显示？ - Kyle

没错，是的。这样它就会作为整个列表右侧的一列阅读。 - Martin

如果可能的话，我不想改变HTML，因为它会具有双重目的。一旦我开始制作智能手机版本，它将具有三重目的。 - Martin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ryan Kinal · Accepted Answer

根据你所提供的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/