Переместите 2 div в родительский div и расположите такие div один под другим

Question

Я создаю веб-страницу с 3 столбцами. Средний столбец - это то, куда уходит весь контент. Содержимое, которое я хочу ввести, должно быть в формате выровненного по левому краю изображения, за которым следует текст рядом с изображением. И это течет по всей колонке с разными изображениями и соответствующим текстом. Так как мой макет является макетом на основе div, я поместил основной div (page_content) для столбца. Затем заголовок (h4) и ниже заголовка я ввел еще один div. Этот div в свою очередь содержит отдельные div, которые вложены в div (class photo) для изображения и div (class lat_art) для текста. HTML-код и CSS-код приведены ниже. Моя проблема в том, что первое изображение и текст появляются, но последующие выстраиваются в линию вертикально ниже первого текста, т.е. занимают только 50% от div и плавают вправо, толкая соответствующий текст под ним в том же 50% пространства Если я укажу высоту для отдельных элементов, вероятно, изображение будет больше, чем текст. Но если я сделаю это, мой код не станет статичным. Я хочу, чтобы это было динамичным. Пожалуйста помоги.

HTML-код

<div id="page_content"> 
<h4 class="center_cap">LATEST ARTISTS</h4> 
<!--Div for the content begins here--> 
<div> 
<!--Individual div begins here--> 
<div > 
<div class="photo"> 
<img src="Images/guitar.jpg" alt="guitar"/> 
</div> 
<div class="lat_art"> 
<span class="artist">ROCK ON</span> 
<p> 
Good news to all the fans of 'Rock On'. Concerts all around the world. 
</p> 
</div> 
</div> 
<!--Individual div ends here--> 

<!--Individual div begins here--> 
<div > 

<div class="photo"> 
<img src="Images/guitar.jpg" alt="guitar"/> 
</div> 

<div class="lat_art"> 
<span class="artist">ROCK ON</span> 
<p> 
Good news to all the fans of 'Rock On'. Concerts all around the world. 
</p> 
</div> 
</div> 
</div> 
<!--Div for the content ends here--> 
</div> 

Код из внешней таблицы стилей

.photo{ 
width:48%; 
float:left; 
padding-left:2px; 
} 
.lat_art{ 
width:50%; 
float:right; 
} 

Answer 1

За этим действительно трудно следовать, потому что вы очень часто описываете каждое слово «div». Как бы то ни было, вы описали, что у вас есть три столбца, но если я правильно понял, это только средний, о котором вы спрашиваете.

Вы хотите этот формат:

• картинка слева
• Справа от картинки у вас есть заголовок
• Под заголовком у вас есть много текста, который обвивает картинку

Правильно?

Вы проблема в том, что вы плаваете, но вы не очищаете плавание. Это означает, что все содержимое под ним будет выровнено в соответствии с рисунком. То, что вам нужно, это установить ясно: оба после того, как вы не хотите, чтобы содержимое больше переносилось.

Я написал небольшой пример и проверил его. CSS встроен, чтобы сделать пример коротким и простым.

<div>
<img src="pircture.png" style="float:left;height:400px;width:400px" />
<h4>My header</h4>
<p> A little content</p>
<div style="clear:both"></div>
</div>

Answer 2

Я не уверен на 100%, что понимаю вопрос. Если вы действительно хотите, чтобы у того, что вы называете отдельные div , было изображение слева и текст справа, вы можете сделать это, переместив и фотографию и lat_art div left . Если вы действительно хотите, чтобы текст был справа и тек под рисунком, если он длиннее, не используйте 'lat_art' вообще .

Нет необходимости указывать высоту отдельных элементов Div или очищать поплавки на них, так как они по умолчанию будут падать один под другим (элементы являются блоками).

Вы тоже стали жертвой дивита - <span class="artist">ROCK ON</span> Скорее всего, это может быть что-то более значимое, например <h5 class="artist">ROCK ON</h5>, абзац или что-то еще, стилизованное соответственно. IMG может быть так же легко:

<img src="Images/guitar.jpg" alt="guitar" class="photo"/> 

вместо:

<div class="photo"> 
<img src="Images/guitar.jpg" alt="guitar"/> 
</div>

Answer 3

Вероятно, вы можете сэкономить много времени и усилий, используя YUI Grids CSS от Yahoo!