0

私はしばらくこの問題を見つめていました。ここにいる誰かが私を正しい方向に導くことができることを望んでいました

何らかの理由で、フロートを希望どおりに並べることができません! 映画を右に移動することはできましたが、レビュアーの引用の 2 つのフロート列をそのすぐ隣に配置したい場合は.

問題

画像と列を扱うCSSコードは次のとおりです

.overview { /* The picture */
display:block;
float:right;
background-color: #A2B964;
}

.column1{
clear: left;
width: 31%;
margin-left: 2%;
margin-right: 1%;
}

.column2{
clear: left;
width: 31%;
margin-left: 1%;
margin-right: 2%;
}

画像の HTML は次のとおりです。

<div class = "overview">
            <img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/overview.png" alt="general overview" />
        </div>

列の HTML は次のとおりです。

<div class = "column1">
        <p class = "quotebox">
            <img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/rotten.gif" alt="Rotten" style="float:left;padding:5px;"/>
            <q>Ditching the cheeky, self-aware wink that helped to excuse the concept's inherent corniness, the movie attempts to look polished and 'cool,' but the been-there animation can't compete with the then-cutting-edge puppetry of the 1990 live-action movie.</q>
        </p>
        <p class = "reviewer">
            <img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/critic.gif" alt="Critic" style="float:left;padding:5px;"/>
            Peter Debruge <br />
            <em>Variety</em>
        </p>

        <p class = "quotebox">
            <img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/fresh.gif" alt="Fresh" style="float:left;padding:5px;"/>
            <q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q>
        </p>
        <p class = "reviewer">
            <img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/critic.gif" alt="Critic" style="float:left;padding:5px;"/>
            Todd Gilchrist <br />
            <em>IGN Movies</em>
        </p>

        <p class = "quotebox">
            <img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/rotten.gif" alt="Rotten" style="float:left;padding:5px;"/>
            <q>It stinks!</q>
            <br />
        </p>
        <p class = "reviewer">
            <img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/critic.gif" alt="Critic" style="float:left;padding:5px;"/>
            Jay Sherman (unemployed)
        </p>

        <p class = "quotebox">
            <img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/rotten.gif" alt="Rotten" style="float:left; padding:5px;"/>
            <q>The rubber suits are gone and they've been redone with fancy computer technology, but that hasn't stopped them from becoming dull.</q>
        </p>
        <p class = "reviewer">
            <img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/critic.gif" alt="Critic" style="float:left;padding:5px;"/>
            Joshua Tyler <br />
            <em>CinemaBlend.com</em>
        </p>

        <p class = "quotebox">
            <img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/rotten.gif" alt="Rotten" style="float:left;padding:5px;"/>
            <q>YOUR REVIEW HERE</q>
        </p>
        <p class = "reviewer">
            <img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/critic.gif" alt="Critic" style="float:left;padding:5px;"/>
            NAME <br />
            <em>PUBLICATION</em>
        </p>
        </div>
        <div class = "column2">
        <p class = "quotebox">
            <img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/rotten.gif" alt="Rotten" style="float:left;padding:5px;"/>
            <q>The turtles themselves may look prettier, but are no smarter; torn irreparably from their countercultural roots, our superheroes on the half shell have been firmly co-opted by the industry their creators once sought to spoof.</q>
        </p>
        <p class = "reviewer">
            <img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/critic.gif" alt="Critic" style="float:left;padding:5px;"/>
            Jeannette Catsoulis <br />
            <em>New York Times</em>
        </p>

        <p class = "quotebox">
            <img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/rotten.gif" alt="Rotten" style="float:left;padding:5px;"/>
            <q>Impersonally animated and arbitrarily plotted, the story appears to have been made up as the filmmakers went along.</q>
        </p>
        <p class = "reviewer">
            <img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/critic.gif" alt="Critic" style="float:left;padding:5px;"/>
            Ed Gonzalez <br />
            <em>Slant Magazine</em>
        </p>

        <p class = "quotebox">
            <img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/fresh.gif" alt="Fresh" style="float:left;padding:5px;"/>
            <q>The striking use of image and motion allows each sequence to leave an impression. It's an accomplished restart to this franchise.</q>
        </p>
        <p class = "reviewer">
            <img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/critic.gif" alt="Critic" style="float:left;padding:5px;"/>
            Mark Palermo <br />
            <em>Coast (Halifax, Nova Scotia)</em>
        </p>

        <p class = "quotebox">
            <img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/rotten.gif" alt="Rotten" style="float:left;padding:5px;"/>
            <q>The script feels like it was computer generated. This mechanical presentation lacks the cheesy charm of the three live action films.</q>
        </p>
        <p class = "reviewer">
            <img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/critic.gif" alt="Critic" style="float:left;padding:5px;"/>
            Steve Rhodes <br />
            <em>Internet Reviews</em>
        </p>

        <p class = "quotebox">
            <img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/rotten.gif" alt="Rotten" style="float:left;padding:5px;"/>
            <q>YOUR REVIEW HERE</q>
        </p>
        <p class = "reviewer">
            <img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/critic.gif" alt="Critic" style="float:left;padding:5px;"/>
            NAME <br />
            <em>PUBLICATION</em>
        </p>
        </div>

参考までに、また私の質問を明確にするために、出力は次のようになります。

私のフロートコラムが TMNT ロゴの横にない理由がわかるでしょうか?

4

1 に答える 1

1

さて、私がやったことは次のとおりです：http://jsfiddle.net/PR3un/

<div class = "overview">
    <img ... />
    <dl>...</dl>
</div>

私がした唯一の違いは...

  • clear:both を削除しました。
  • dl を「.overview」div に移動しました
  • dl から概要クラスを削除しました

フロートはトリッキーです。私が同僚に話すお気に入りの類推は次のとおりです。

float を使用することは、ハイパースペースを旅するようなものです。それらは存在し、他のDOM要素に影響を与える可能性があります...しかし、それらは別の次元平面（左右）でも移動しています。float ハイパースペース移動を橋渡しするために、clear:both をそれ自体に適用するか、overflow:hidden をその親に適用できます。

...そして、フローティング要素の親にフロートを適用すると、自己クリアを提供できますが、親もハイパースペースを移動します。

于 2013-09-25T02:53:01.920 に答える