2015-08-13 2 views
0

Первые 4 изображения одного размера, и мне нужно выравнивать их по странице равномерно. Как я могу это сделать с помощью HML5 и CSS?Подкладка 4 изображения на странице

<block> 
    <img id="bedroom" src="photos/bedroom1.jpg" alt="bedroom furniture"> 
    <img id="dining" src="photos/dining.jpg" alt="dining furniture" > 
    <img id="lounge" src="photos/lounge.jpg" alt="lounge furniture"> 
    <img id="office" src="photos/office.jpg" alt="office furniture"> 
</block> 
    <img id="lounge2" src="photos/lounge2.jpg" alt="large loungeroom funiture"> 
    <img id="mixed" src="photos/mixed.jpg" alt="A mix of furniture"> 

CSS:

#logo {position: relative; margin-left:650px; } 
nav {background-color: red; border-color: black; border-style:ridge; 
    position: relative; max-width: 100%; text-align: center; padding: 10px;} 
nav li {display: inline; } 
nav a {color:black; padding: 10px 50px 10px 50px;} 
nav a:visited {color:blue;} 
nav a:hover {color: green;} 
block { position:absolute; padding: 10px 50px 10px 50px; width: 100%; } 
+0

Попробуйте следующее: http://radiationstar.com/distribute-divs-images-equalyline – Berriel

ответ

0
#genericClass { 
    float:left; 
} 

Если линия их все я считаю.

0

добро пожаловать в переполнение стека! Теперь, во-первых, ваш код был немного запутанным и не имел особого смысла. Такие части ваших css, которые не имеют отношения к вашему HTML-коду, (nav не были замечены в вашем HTML).

Чтобы ответить на ваш вопрос, то, что вы ищете, является тегом CSS float.

Поплавок CSS свойство указывает, что элемент должен быть взят из нормального потока и размещены вдоль левой или правой стороне его контейнера, где текст и встроенные элементы будут обернуть вокруг него. https://developer.mozilla.org/en-US/docs/Web/CSS/float

При использовании float вы можете использовать left или right, и конечно же: нет, Начальное, не наследуют. Тот, который вам нужен конкретно, - float: left, и это будет сообщать всем элементам выравнивание слева от страницы рядом друг с другом.

я написал до миленькая JSFIDDLE для вас :)

Если у вас есть какие-либо дополнительные вопросы о том, как работает поплавка вы можете Google он (или Bing это ...), или просто оставить его в качестве комментария к вопросу :)

Смежные вопросы