Question

我正在尝试布局一个页面，该页面包含我希望在新行上居中的锚元素。但是，这些块位于<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解决这个问题。

Answer 1

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

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

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

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

可能需要根据预期影响的内容来调整选择器本身。（我显然不太熟悉你的页面的css代码。）希望这会指出你正确的方向！

Chrome：溢出：自动+边距：有时无法正确布局

1 个答案: