Вёрстка нескольких блоков

398

17 февраля 2017, 01:40

Доброго времени суток. Пытаюсь реализовать следующее (см. схему)

1 - Блок с картинкой и доп. информацией. Его размер не меняется и в районе 320px по ширине. Выравнивание float:left;

2 - Блок с таблицей. Она может быть меньше по высоте, чем блок 1. А может быть больше. Или равна по высоте. Ширина может меняться при изменении ширина экрана.

3 - Блок дополнительной информации. Располагается под блоками 1 и 2. Изменяется по ширине автоматически.

Проблема: В итоге выходит так, что хоть блоки 1 и 2 находятся в одном дополнительном блоке, высота первого блока не учитывается. И выходит так, что блок 3 начинается сразу после 2 блока. Попробовал применить к общему блоку применить display: table;. Помогло, но только в мазиле не воспринимается. Выходит вот так (без display: table)

article { 
		margin: auto; 
		margin-top: 25px; 
		max-width: 60%; 
		margin-bottom: 80px; 
	} 
 
	#product_box { 
		float:left; 
 
	} 
 
	article img { 
		cursor: pointer; 
		display: block; 
		margin: 10px; 
		/*width: 310px;*/ 
        width:200px; 
	}

<body> 
	<article> 
		<div id='top_info'> 
			<div id='product_box'> 
				<img src='http://media.log-in.ru/i/risovanniy_koshara.jpg' alt='' title=''> 
				<form action="#" method="get" accept-charset="utf-8" id='quantity_box'> 
					<input type="text" name="" value="" placeholder=""><br> 
					<input type="text" name="" value="" placeholder=""><br> 
					<input type="text" name="" value="" placeholder=""> 
				</form> 
			</div> 
			<table border='1px'> 
				<caption><h1>Название таблицы</h1></caption> 
				<thead> 
					<tr> 
						<th>Какой-то тест тут</th> 
						<th>Какой-то тест тут</th> 
					</tr> 
				</thead> 
				<tbody> 
					<tr> 
						<td>Какой-то тест тут</td> 
						<td>Какой-то тест тут</td> 
					</tr> 
					<tr> 
						<td>Какой-то тест тут</td> 
						<td>Какой-то тест тут</td> 
					</tr> 
				</tbody> 
			</table> 
		</div> 
		<div id='middle_info'> 
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id enim auctor, dignissim est a, porttitor augue. Sed rutrum urna vel auctor aliquam. Donec arcu nulla, bibendum suscipit vestibulum eget, elementum at ante. Suspendisse fermentum lorem urna, ut bibendum augue rhoncus eget. Pellentesque risus tortor, rutrum vitae magna blandit, malesuada pellentesque augue. Curabitur eros nisl, volutpat vitae lacus nec, placerat hendrerit eros. Nulla non nibh in ligula vestibulum faucibus.</p> 
			<p>Nulla accumsan sapien eget lectus dignissim, sed cursus nisl molestie. Sed molestie libero nec dolor dapibus accumsan. Quisque id dui ex. Phasellus feugiat condimentum tincidunt. Nullam porta mollis orci, eget aliquet purus porta et. Phasellus eget quam in ante convallis mattis. Curabitur eget malesuada neque, id efficitur justo. Maecenas lacinia a mauris eget suscipit. Nullam elit est, efficitur quis auctor sit amet, mattis sed mauris. Praesent pellentesque massa velit, eget malesuada risus aliquam sed.</p>		 
		</div> 
	</article> 
</body>

Код также для удобства добавил тут. Помогите, пожалуйста, разобраться.

Answer 1

Вам надо расчистить блок после всплывающего элемента. Например, так:

#top_info:after {
  content: "";
  display: table;
  clear: both;
}

Можно уже не верстать флоатами и переходить на флексбокс:

#top_info {
  display: flex;
}
#product_box {
  /* float:left; тогда флоат не понадобится */
}

Answer 2

article { 
		margin: auto; 
		margin-top: 25px; 
		margin-bottom: 80px; 
	} 
 
	#product_box { 
		float:left; 
 
	} 
 
	article img { 
		cursor: pointer; 
		display: block; 
		margin: 10px; 
		/*width: 310px;*/ 
        width:200px; 
	}

<body> 
	<article> 
		<div id='top_info'> 
			<div id='product_box'> 
				<img src='http://media.log-in.ru/i/risovanniy_koshara.jpg' alt='' title=''> 
				<form action="#" method="get" accept-charset="utf-8" id='quantity_box'> 
					<input type="text" name="" value="" placeholder=""><br> 
					<input type="text" name="" value="" placeholder=""><br> 
					<input type="text" name="" value="" placeholder=""> 
				</form> 
			</div> 
            <div style="float:left;"> 
			<table border='1px'> 
				<caption><h1>Название таблицы</h1></caption> 
				<thead> 
					<tr> 
						<th>Какой-то тест тут</th> 
						<th>Какой-то тест тут</th> 
					</tr> 
				</thead> 
				<tbody> 
					<tr> 
						<td>Какой-то тест тут</td> 
						<td>Какой-то тест тут</td> 
					</tr> 
					<tr> 
						<td>Какой-то тест тут</td> 
						<td>Какой-то тест тут</td> 
					</tr> 
				</tbody> 
			</table> 
           </div>   
		</div> 
         <div style="clear:both;"></div> 
		<div id='middle_info'> 
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id enim auctor, dignissim est a, porttitor augue. Sed rutrum urna vel auctor aliquam. Donec arcu nulla, bibendum suscipit vestibulum eget, elementum at ante. Suspendisse fermentum lorem urna, ut bibendum augue rhoncus eget. Pellentesque risus tortor, rutrum vitae magna blandit, malesuada pellentesque augue. Curabitur eros nisl, volutpat vitae lacus nec, placerat hendrerit eros. Nulla non nibh in ligula vestibulum faucibus.</p> 
			<p>Nulla accumsan sapien eget lectus dignissim, sed cursus nisl molestie. Sed molestie libero nec dolor dapibus accumsan. Quisque id dui ex. Phasellus feugiat condimentum tincidunt. Nullam porta mollis orci, eget aliquet purus porta et. Phasellus eget quam in ante convallis mattis. Curabitur eget malesuada neque, id efficitur justo. Maecenas lacinia a mauris eget suscipit. Nullam elit est, efficitur quis auctor sit amet, mattis sed mauris. Praesent pellentesque massa velit, eget malesuada risus aliquam sed.</p>		 
		</div> 
	</article> 
</body>