0

我一直在盯着这个问题一段时间，我希望这里有人可以引导我朝着正确的方向前进

出于某种原因，我无法让我的花车按照我想要的方式排列！我设法把这部电影放到了右边，但是当我希望评论者引用的两列浮动列就在它旁边时。

问题

这是我处理图片和列的 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>

作为参考，以及澄清我的问题，它应该看起来像这样的输出： http: //courses.cs.washington.edu/courses/cse190m/12sp/homework/2/output/out-wide.png

那么任何人都可以看到为什么我的浮动列没有坐在 TMNT 徽标旁边吗？

4

1 回答 1

1

好吧，这就是我所做的：http: //jsfiddle.net/PR3un/

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

我所做的唯一不同是......

  • 删除了 clear:both,
  • 将您的 dl 移至您的“.overview” div
  • 从您的 dl 中删除了概述类

花车很棘手。我告诉我的同事，我最喜欢的比喻是这样的：

使用浮点数就像穿越超空间。它们存在，有点，并且可以影响其他 DOM 元素......但它们也在不同的维度平面（左右）上移动。要桥接浮动超空间旅行，您可以在其自身上应用 clear:both或在其父级上应用 overflow:hidden。

...如果你在浮动元素的父级上应用 float，它可以提供一个self-clear，但是父级也正在穿越超空间。

于 2013-09-25T02:53:01.920 回答