Проблема с размещением картинок в строку

Ultran · May 3, 2013

Здравствуйте! Не получается разместить несколько изображений в строчку. Точнее должно быть 2 строки по 3 изображения в каждой. Расстояние между изображениями - 5 px. Сейчас выглядит вот так:

Прошу сильно не пинать, еще только учусь.

Вот код файла index.html:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title>Главная страница | Мануфактура Италия</title>
<meta name="keywords" content="мануфактура италия, дизайн мебель, двери, кухни, столешницы, фасады, шкафы шпон, панели 3d мдф, лепной декор, фасадный декор, паркет, каменный шпон, декор акрил anli, панели sibu, реставрация, калининград, уральская, мега-маркет, мега-мебель" />
<meta name="description" content="Мануфактура-Италия - Калининградская фирма ООО Дизайн-Мебель рада предоставить Вам двери, кухни, столешницы, фасады, шкафы шпон, панели 3D МДФ, лепной декор, фасадный декор, паркет, каменный шпон, декор Акрил Anli, панели Sibu и многое другое" />
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico">
<!--[if lte IE 6]><link rel="stylesheet" href="css/style-ie.css" type="text/css" media="screen, projection" /><![endif]-->
</head>
<body>
<div id="wrapper">
<header id="header">
<a href="index.html"><img src="images/logo.png" height="250" alt="Логотип Манууфактура Италия" /></a>
</header><!-- #header-->
<section id="middle">
<div id="container">
<div id="content">
<h1>Главная страница</h1>
<p>Добро пожаловать в <strong>«Мануфактуру Италия»</strong> где в одном салоне предоставляется уникальная возможность самостоятельно получить широкий комплекс услуг по обустройству интерьера Вашего жилища. Здесь под одной крышей собраны самые лучшие фабрики по производству дверей, мебельных фасадов, акриловых и интерьерных 3D панелей, необычных элементов для дизайна, паркет и конечно же кухни, мебель для гостиных, спален и ванных комнат.</p>
<p>Собственные профессиональные дизайнеры компании, а так же опытные монтажные и отделочные бригады с легкостью воплотят в жизнь любую Вашу идею.</p>
<p>Теперь и Вы можете знать, что элитная мебель и предметы интерьера по индивидуальному заказу есть и в г. Калининграде.</p>
</div><!-- #content-->
</div><!-- #container-->
<aside id="sideRight">
<img src="images/tile.jpg" alt="Двери, ручки" class="tile" /><img src="images/tile.jpg" alt="Двери, ручки" class="tile" /><img src="images/tile.jpg" alt="Двери, ручки" class="tile" />
</aside><!-- #sideRight -->
</section><!-- #middle-->
<footer id="footer">
<div id="footer-logo"><a href="http://tomin.pro"><img src="images/tominpro-white.png" alt="Разработано TOMIN.PRO" /></a> <a href="http://www.w3.org/TR/html5/"><img src="images/html5.png" alt="Написано на HTML5" /></a></div>
</footer><!-- #footer -->
</div><!-- #wrapper -->
</body>
</html>

А вот CSS style.css:


@font-face {
font-family: 'Didact Gothic';
font-style: normal;
font-weight: 400;
src: local('Didact Gothic'), local('DidactGothic'), url(http://themes.googleusercontent.com/static/fonts/didactgothic/v4/v8_72sD3DYMKyM0dn3LtWrBIwK9fI-wEnHgeOSrerqs.woff) format('woff');
}
* {
margin: 0;
padding: 0;
}
header, nav, section, article, aside, footer {
display: block;
}
body {
background: #000000;
color: #ffffff;
font-family: Didact Gothic;
}
a {
color: #ffffff;
outline: none;
text-decoration: underline;
}
a:hover {
text-decoration: none;
color: #ffffff;
}
p {
margin: 0 0 18px;
}
h1, h2, h3, h4, h5, h6 {
font-family: Didact Gothic;
color: #ffffff;
text-transform: uppercase;
margin: 0 0 18px;
}
img {
border: none;
}

input {
vertical-align: middle;
}
.tile {
margin-right: 5px;
margin-bottom: 5px;
}
#wrapper {
min-width: 800px;
max-width: 1920px;
margin: 0 auto;
}

/* Header
—————————————————————————--*/
#header {
height: 250px;
background: #000000;
}

/* Middle
—————————————————————————--*/
#middle {
border-right: 471px solid #000000;
height: 1%;
position: relative;
}
#middle:after {
content: '';
clear: both;
display: table;
}
#container {
width: 100%;
float: left;
overflow: hidden;
margin-right: -100%;
}
#content {
padding: 0 40px;
text-align: justify;
}

/* Sidebar Right
—————————————————————————--*/
#sideRight {
float: right;
margin-right: -250px;
width: 250px;
position: relative;
background: #000000;
}

/* Footer
—————————————————————————--*/
#footer {
height: 100px;
background: #000000;
margin: 20px 20px 0 0;

}
#footer-logo {
text-align: right;
}

Подскажите пожалуйста, как разместить изображения так, как мне требуется?

Заранее всем спасибо!

viv · May 4, 2013

Вам нужно сделать изображение плавающими. То есть добавить к ним какой ни будь класс со свойством float и значением left.

Например:

html

<img class="sidebar_img" src="путь к картинке" alt="бла бла" />

css


.sidebar_img{
float: left; /*Размещаем в одну строку*/
margin:0 0 0 5px; /*Отступ 5 пикселей между картинками*/
}
.sidebar_img:first-child{ /*Обнуляем левый отступ у первой картики*/
margin-left:0;
}

Вот здесь код Вашего примера чуть подправленный: http://jsbin.com/uqixuh/1/edit

Думаю принцип понятен, а далее сами уж по себя подгоните)). Если что обращайтесь.

По float тут http://htmlbook.ru/css/float

Edited May 4, 2013 by viv

npofopr · May 4, 2013

Самое простое и действенное:

делаете таблицу с 3мя ячейками, в ячейки картинки и всё готово.

Для картинок уже задаете паддинг и марджин в 5 пикселей.

Lomovskiy · May 4, 2013

Самое простое и действенное:
делаете таблицу с 3мя ячейками, в ячейки картинки и всё готово.
Для картинок уже задаете паддинг и марджин в 5 пикселей.

Так действительно будет на много проще

Sign In

Проблема с размещением картинок в строку

Question

Ultran

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

viv

Link to comment

Share on other sites

npofopr

Link to comment

Share on other sites

Lomovskiy

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information