float left не работает

274

10 октября 2018, 15:40

Сижу учусь, моя первая верстка (очень криво) Надо поставить картинки в ряд и задать им width: 48% и float: left чтобы отражались в ряд по 2 каритнки и маштабировались при изменении размера окна. Если задавать размер в %, то отражаются друг под другом, а если в px, то все ок, но с маштабом окна все плохо.

.row:after { 
  visibility: hidden; 
  display: block; 
  font-size: 0; 
  content: " "; 
  clear: both; 
  height: 0; 
} 
.row { display: inline-block; } 
/* start commented backslash hack \*/ 
* html .row { height: 1%; } 
.row { display: block; } 
/* close commented backslash hack */ 
.c-text { 
	float: left; 
	font-family: 'Cuprum', sans-serif; 
	border: 1px solid #000; 
	padding: 5px; 
	margin-bottom: 10px; 
	position: initial; 
 
} 
 
.content { 
	width: 70%; 
	float: left; 
} 
 
.site img{ 
	width: 47%; 
	margin: 5px; 
	box-shadow: 0 0 10px 0 #5c5c5c inset, 0 0 10px 0px #20201e; 
	transition: 1s; 
	transform: none; 
 
} 
 
.site:hover img{ 
	margin: 5px; 
	transform: scale(1.2); 
	box-shadow: 0 0 50px 0 #5c5c5c inset, 0 0 70px 0px #20201e; 
 
} 
 
.site { 
	display: inline-block; 
	float: left; 
 
}

<div class="row"> 
	<div class="content"> 
		<div class="c-text"> 
				<h1 style="text-align: center;">ТЕСТ</h1> 
				<div class="site"> 
					<img src="http://wallpapers-image.ru/1600x900/summer/wallpapers/wallpapers-summer-067.jpg"> 
				</div> 
				<div class="site"> 
					<img src="http://wallpapers-image.ru/1600x900/summer/wallpapers/wallpapers-summer-067.jpg"> 
				</div> 
				<div class="site"> 
					<img src="http://wallpapers-image.ru/1600x900/summer/wallpapers/wallpapers-summer-067.jpg"> 
				</div> 
				<div class="site"> 
					<img src="http://wallpapers-image.ru/1600x900/summer/wallpapers/wallpapers-summer-067.jpg"> 
				</div> 
		</div> 
	</div> 
</div>

Answer 1

Необходимо у элементов с классом .site добавить width: 47% и убрать float: left. Эти элементы, согласно CSS имеют display: inline-block, это делает их блочно строчными, которые и так будут располагаться друг за другом как строчные, например input, или img.

Картинкам .site img изменить width: 100%.

.row:after { 
  visibility: hidden; 
  display: block; 
  font-size: 0; 
  content: " "; 
  clear: both; 
  height: 0; 
} 
.row { display: inline-block; } 
/* start commented backslash hack \*/ 
* html .row { height: 1%; } 
.row { display: block; } 
/* close commented backslash hack */ 
.c-text { 
	float: left; 
	font-family: 'Cuprum', sans-serif; 
	border: 1px solid #000; 
	padding: 5px; 
	margin-bottom: 10px; 
	position: initial; 
 
} 
 
.content { 
	width: 70%; 
	float: left; 
} 
 
.site img{ 
	width: 100%; 
	margin: 5px; 
	box-shadow: 0 0 10px 0 #5c5c5c inset, 0 0 10px 0px #20201e; 
	transition: 1s; 
	transform: none; 
 
} 
 
.site:hover img{ 
	margin: 5px; 
	transform: scale(1.2); 
	box-shadow: 0 0 50px 0 #5c5c5c inset, 0 0 70px 0px #20201e; 
 
} 
 
.site { 
    width: 100%; 
	display: inline-block; 
}

<div class="row"> 
	<div class="content"> 
		<div class="c-text"> 
				<h1 style="text-align: center;">ТЕСТ</h1> 
				<div class="site"> 
					<img src="http://wallpapers-image.ru/1600x900/summer/wallpapers/wallpapers-summer-067.jpg"> 
				</div> 
				<div class="site"> 
					<img src="http://wallpapers-image.ru/1600x900/summer/wallpapers/wallpapers-summer-067.jpg"> 
				</div> 
				<div class="site"> 
					<img src="http://wallpapers-image.ru/1600x900/summer/wallpapers/wallpapers-summer-067.jpg"> 
				</div> 
				<div class="site"> 
					<img src="http://wallpapers-image.ru/1600x900/summer/wallpapers/wallpapers-summer-067.jpg"> 
				</div> 
		</div> 
	</div> 
</div>

Создание интернет-магазина посуды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Цикл for .. of проблема

У нас есть массив объектов newData(длина массива 9 ел)

171

HTML

Сделать общую тень у совмещенных блоков

170

HTML

Не обновляется сайт на Android Chrome

Написал простенький сайт: (indexphp)

186

HTML

Не появляется фон rgba

никак не могу понять что не такКогда я пробую использовать свойство rgba() для main-text___form, ничего нет (делаю по видео) делала как там одной строчкой...

187