Как выровнять блоки?

Question

[Jacksnow]

Не могу найти информацию как выровнять блоки смотрите.
Как у меня сейчас рис.1. Как надо рис.2.

html:

<div class="row">
	<div id="block1" class="col-md-6">
	<img id="mmm1" src="../images/img1.png" alt="история" width="88" height="144">
	<p id="t2">ТЕКСТТЕКСТТЕКСТТЕКСТ</p></div>

	<div id="block1" class="col-md-6">
	<img id="mmm1" src="../images/img2.png" alt="история" width="99" height="119">
	<p id="t2">ТЕКСТТЕКСТ</p></div>

	<div id="block2" class="col-md-6">
	<img id="mmm1" src="../images/img3.png" alt="история" width="127" height="106">
	</div>

	<div id="block21" class="col-md-6">
	<img id="mmm1" src="../images/img4png" alt="история" width="140" height="125">
	</div>

CSS:

#block1 {
	text-align:center;
	margin-top: 160px;
	padding-left: 75px;
	padding-right: 75px;
}
#block2 {
	text-align:center;
	margin-top: 100px;
	padding-left: 75px;
	padding-right: 75px;
}
#block21 {
	text-align:center;
	margin-top: 100px;
	padding-left: 75px;
	padding-right: 75px;
}

Не пойму почему отступ берется от текста, а не от блока, и почему блоки местами поменялись. И img3 справа, а надо чтоб слева. Новичек.

Answer 1

[tommy_13]

после каждого четного блока вставляем < div class="clearfix">< /div >

Comments

[Jacksnow]

Спасибо, помогло, а отступ сверх берется от текста, и приходиться в ксс для каждого прописывать, чтоб 3 и 4 картинки сровнялись. Так и надо делать, или я не так делаю?

[tommy_13]

отступ будет считаться от длинного блока

[Jacksnow]

tommy_13: понял, спасибо.

Answer 2

[Виктор Таран]

<col-6>
<col-6>
<div class="col-md-12></div>
<col-6>
<col-6>
<div class="col-md-12></div>
<col-6>
<col-6>

Дешево сердито и всегда работать будет.
Все что нужно делать, Это на php выводить каждый второй элемент пустой див кол 12 притом на выводе.
ни цсс ни жс ни аякса
ни абсалютов ни мин макс хейт видтх и тд.
дешево и сердито.

примр
www.mydefile.ru/catalog

Comments

[Jacksnow]

php пока не изучил)

[Виктор Таран]

ну если это просто верстка так тем-более

Answer 3

[Сергей]

У вас ошибка в написании адреса картинки в блоке с id="block21". И с DIV-ами что-то не так, 1-й, вроде, лишний. Кроме того, не в обиду, код очень перегружен. Также ужасная ситуация с id и class. Далее, вы указываете размеры картинок в HTML-коде. Пожалуйста, делайте это через CSS.
Теперь к самому процессу. Судя по вашему CSS-коду, вы выравниваете блоки, используя margin и padding. С текущим кодом, у вас даже первой картинки не получается, все блоки выровнены по центру и идут сверху вниз, друг под другом. Вы даже не написали, как именно вы их хотите выровнять. Всегда по 2 блока в ряд? Или это меняется с размером окна?
Я упростил ваш код, выкинув оттуда не имеющие отношения к предмету обсуждения вещи.
Может, такое поведение блоков вам нравится больше? тыц!