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 が 2 つの隣接する要素のみをフロートするかどうか疑問に思い始めています。img タグと p タグの前後に div を配置することもできると思いますが、HTML をきれいに保ちたいと考えています。

すべての要素には幅があり、blockquote は含まれる要素に確実に収まります (つまり、li の幅は、すべての要素とそのパディング、ボーダー、マージンなどを含めるのに十分です)。すべての要素を左にフロートさせてみましたが、右にフロートさせたブロック引用を除きます。ブロック引用の前の要素に clear:left を使用してみました。喜びはありません。

誰でも私を正しく言えますか？

ありがとう、

マーティン。

4

3 に答える 3

7

あなたが持っているHTMLでは、これは不可能です。

ドキュメントの流れは HTML の順序で発生します。これは、通常の状況下では、配置に関する限り、要素は HTML 内のその後にある要素にのみ影響を与えることができることを意味します。

float: rightたとえば、要素を右に移動し、それに続く要素は左に移動します。clear: left適用された要素の左側に要素が流れるのを防ぎます。

HTML をブロックに分割し、それらをフローティングすることをお勧めします。

h3, img, p次に、CSS からセレクターとルールを削除し、同様のルールに置き換えることができます。.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>ため、親要素の幅に関係なく右に残ります。別の例。

他にお手伝いできることがあれば、更新します:)

コメントの後、HTML 構造を修正して、img またはタイトルの直後に引用符を配置する必要があります。その後、それはあなたが望むように動作します。例。

于 2011-08-30T13:29:48.923 に答える