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 に答える