3

我正在尝试布局一个页面，该页面具有我想要在新行上并居中的锚元素。然而，这些块<p>位于浮动图像旁边的元素内部。

右： http ://test.sunnysidemarket.ca/right.jpg

错误： http ://test.sunnysidemarket.ca/wrong.jpg

所以基本上我有：

HTML：

<div class="content">
    <div>
        <img src="..." width="276" height="207" />
    </div>
    <div class="body">
          <p>
            ...
            <a class="mediaset" href="...">Link</a>
        </p>
    </div>
</div>

CSS：

.content img {
    float: right;
}

a.mediaset {
    margin: 0 auto;
    width: 220px;
    display: block;
    overflow: auto;
}

或者您可以在 jsfiddle 中看到的内容：http: //jsfiddle.net/CVkFw/

这个问题是间歇性的，有时会发生，有时不会。在我看来是 chrome 中的一个错误，其中计算了溢出和边距属性，但是当浮动内容加载时，有时浏览器不会再次布局元素。

有一些方法可以使用 jQuery 和修改我的 HTML 来解决这个问题，但如果可能的话，我真的很想用 CSS 来解决这个问题。

4

1 回答 1

2

我最好的猜测是，这种不稳定的行为是由overflow: visible应用在 global.styles.css 中引起的。问题：

.node-article .field-name-body,
.node-synced-facebook-content .field-name-body {
    overflow: visible;
}

我提供这个建议是因为当我添加这个 CSS 覆盖时overflow: hidden，该组件似乎加载“更稳固”。修复：

.node-article .field-name-body,
.node-synced-facebook-content .field-name-body {
    overflow: hidden;
}

选择器本身可能需要根据要影响的内容进行调整。（我显然不是很熟悉您页面的 css 代码。）希望这可以为您指明正确的方向！

于 2013-02-09T04:39:44.043 回答