5

我在花车上遇到了一些麻烦。我正在玩一个网站，我想使用媒体查询对不同的浏览器宽度做出一些响应。当它坐下时，页面显示 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。没有喜悦。

任何人都可以让我正确吗？

谢谢，

马丁。

4

3 回答 3

7

使用您拥有的 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/

于 2011-08-30T14:27:43.553 回答
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>

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

于 2011-08-30T15:00:11.070 回答
0

您可以将所有元素向左浮动以将它们全部水平排列。检查这个例子。

您还可以给<ul>a 宽度并使最后一个元素向右浮动，这样无论父元素的宽度如何，它都将保持正确。另一个例子。

如果还有更多我可以提供的帮助，我会更新:)

在您的评论之后，您应该修改 HTML 结构以在 img 或标题之后直接添加块引用。然后它会按照你的意愿行事。例子。

于 2011-08-30T13:29:48.923 回答