Почему мои поплавки не выстраиваются в линию?

Я некоторое время смотрел на эту проблему, и я надеялся, что кто-то здесь может направить меня в правильном направлении.Почему мои поплавки не выстраиваются в линию?

По какой-то причине я не могу получить, чтобы мои поплавки выстраивались так, как я их хочу к! Мне удалось получить фильм вправо, но когда я хочу, чтобы два плаката рецензента размещали рядом с ним.

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?

источник

2013-09-25 YourbrainonCompSci

Не могли бы вы сделать демо на jsfiddle.net? Это значительно облегчит игру. – rfoo

Если сложно сделать скрипку, могу ли я предложить отплыть от поплавков для этой конкретной проблемы и использовать позиционирование, чтобы получить обзор, где вы хотите. – rfoo

извините, я не очень-то знаком с jsfiddle.net, и когда я положил его туда, он вышел, глядя на всех бонкеров. – YourbrainonCompSci

Хорошо, Вот что я сделал: http://jsfiddle.net/PR3un/

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

Единственные различия, которые я сделал были ...

Убраны ясно: как,
Перевезу ваш Д.Л. в ваш». обзор "div
Удалено обзорный класс из вашего dl

Поплавки сложны. Моя любимая аналогия, которую я рассказываю моим коллегам, такова:

Использование поплавков подобно путешествиям по гиперпространству. Они существуют, видны и могут воздействовать на другие элементы DOM ... но они также перемещаются в другой размерной плоскости (слева направо). Чтобы преодолеть перемещение гиперпространства поплавка, вы можете применить clear: оба на себе или переполнение: скрыто от его родителя.

... И если вы применять поплавок на родителе плавающей области элемента, он может обеспечить себя четкую, но тогда родитель путешествует через гиперпространство тоже.

источник

2013-09-25 02:53:01 TheIronDeveloper

Итак, когда вы сделали

, это просто удаление класса обзора из него? – YourbrainonCompSci

Да, ему не нужно наследовать ширину: 250, он получает это от своего родителя (что является «обзором») – TheIronDeveloper

Также ваша субконтентная область пыталась установить «ширину» с «весом». Обновлено по адресу: http://jsfiddle.net/PR3un/1/ – TheIronDeveloper

Почему мои поплавки не выстраиваются в линию?

ответ

Смежные вопросы