Как записать 3 элемента в одну строку и 3 во вторую?

Question

[Luntik94]

Смог сделать одну строку из трех элементов друг за другом, но когда дело дошло до второй то она понятное дело налазит на первую, как сделать так чтобы одна на другую не лезла?

Answer 1

[Ankhena]

1. Упростите мозайку

<div id="content"> 
        <div class="parent">
        <div style="clear:both;">
...
</div>
</div>
</div>

2. Получившемуся родительскому блоку задайте display:flex; и соответствующие свойства.
Боюсь писать какие не видя всей структуры.

3. Для картинок с названиями есть чудесные теги figure и figcaption

Answer 2

[semki096]

Надо смотреть код чтото у вас неправильно, но как вариант можно попробовать обернуть строки в <div style="clear:both;">

Answer 3

[Sanan Yuzb]

Поставь отступы для каждого ряда.

Answer 4

[Luntik94]

Вот код, для обнаружения ошибки

<div id="content"> 
        <div class="parent">
        <div style="clear:both;"><div class="child">	
        <img src="images/flowers/1.png">
        <input type="button" value="ЗАКАЗАТЬ">
        </div>
        <div class="child">
        	<img src="images/flowers/2.png">
        	<input type="button" value="ЗАКАЗАТЬ">
        </div>
        <div class="child">
        	<img src="images/flowers/3.png">
        	<input type="button" value="ЗАКАЗАТЬ">
        </div>
        <div class="child">	
        <img src="images/flowers/4.png">
        <input type="button" value="ЗАКАЗАТЬ">
        </div>
        <div class="child">
        	<img src="images/flowers/5.png">
        	<input type="button" value="ЗАКАЗАТЬ">
        </div>
        <div class="child">
        	<img src="images/flowers/6.png">
        	<input type="button" value="ЗАКАЗАТЬ">
        </div>
        </div>

     
 </div>     	
</div>


<code lang="css">
#content
	{	
		position:absolute; 
		background-color: white;

		height: 1000px;
		display: inline-block;
		

		
	}
.parent 
{	display: inline-block;	
	
	height: 200px;
	
	
}
.child
{	
	margin: 10px;
	height: 50px;
	float: right;
	background: white;
	width: 30%;
	
</code>

Comments

[semki096]

мне кажется лучше переписать. #content { position:absolute; это жесть

[Денис Букреев]

semki096: более того, чутье мне подсказывает, что данный "верстальщик" является исполнителем заказа за монеты.
Очередной недосайт клепается, работа у нормальных верстальщиков забирается

[Luntik94]

Денис Букреев: не, я просто учусь и мне друг дал задание такое, так что не за монету, не переживай

Answer 5

[Руслан Шадура]

Если есть флоат, то для родителя используй clearfix