Question

我在使用花车时遇到了一些麻烦。我正在玩一个网站，我希望通过不同的浏览器宽度使用媒体查询做出一点响应。当它坐下时，页面显示HTML的流程，但是当浏览器被加宽时，我希望blockquote包含在img的右边，但它只包含在它之前的p元素。< / 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

我确定我错过了一些显而易见的东西，但我无法解决它是什么，我开始怀疑浮子是否只浮动两个相邻的元素。我想我可以在img和p标签周围加一个div，但我希望保持HTML的整洁。

所有元素都有宽度，并且blockquote绝对适合包含元素（即，li的宽度足以包含所有元素及其填充，边框，边距等）。我试过浮动所有剩下的元素，禁止我已经浮动的块引用。尝试使用clear：left表示块引用之前的元素。没有快乐。

有人可以把我弄好吗？

谢谢，

马丁。

Answer 1

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

Answer 2

解决方案非常简单。你想的就更简单了。

改变：

<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（然后向右浮动），首先让元素向右浮动。我知道这不符合逻辑，但这是正确的答案......我自己多次这样做。

Answer 3

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

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

如果我能提供更多帮助，我会更新：）

在您发表评论之后，您应该修改HTML结构，以便在img或title之后直接获得blockquote。然后它会按照你的意愿行事。 Example

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

3 个答案: