为什么我的花车不排队？

时间：2013-09-25 02:11:12

标签： css html5 css-float

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

出于某种原因，我不能让我的花车按照我想要的方式排列！我设法让电影在右边，但是当我想要两个浮动的列的评论者的引号就在它旁边。

problem

这是我的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标志旁边吗？

1 个答案:

答案 0 :(得分：1)

好的，继承人我做了什么：http://jsfiddle.net/PR3un/ 

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

我唯一的不同之处是......

  • 删除了明确：两者，
  • 将您的dl移动到＆＃34; .overview＆＃34;格
  • 从dl
    • 中删除了概述类

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

  

使用浮动就像穿越超空间一​​样。它们存在，有点，并且可以影响其他DOM元素......但它们也在不同的维度平面（左 - 右）行进。要弥合浮动超空间旅行，您可以应用清除：自身或溢出：隐藏在其父级上。

     

...如果你在浮动元素的父级上应用浮动，它可以提供自我清晰，但是父母正在通过超空间。

相关问题
最新问题