Выравнивание фото по горизонтали

Question

Я пытаюсь разместить несколько фотографий на веб-странице и хочу, чтобы они располагались горизонтально группами по два человека. Прямо сейчас они просто идут вертикально вниз по левой стороне моей области содержимого. Вот код, который я использую для галереи:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Synergy Music Academy: Media</title>
<meta charset="utf-8">
<link rel="stylesheet" href="project.css">
        <link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>


</head>
<body>
    <div id="wrapper">
    <h1>Synergy Music Academy</h1>


<div id="nav">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="media.html">Media</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="blog.html">Blog</a></li>
    <li><a href="contact.html">Contact</a></li>
    </ul>
</div>
<div id="content">
<div id="gallery">
<ul>
<li>
    <a href="images/jack.jpg"><img src="images/jackthumb.jpg" width="200" height="200"
    alt="Jack">
    <span><img src="images/jack.jpg" width="400" height="400" alt="Jack"><br>
    Singing</span></a>
</li>
<li>
    <a href="images/band.jpg"><img src="images/bandthumb.jpg" width="200" height="200"
    alt="Band Workshop">
    <span><img src="images/band.jpg" width="400" height="400" alt="Band Workshop"><br>
     Band Workshop</span></a>
</li>
<li>
    <a href="images/synths.jpg"><img src="images/synthsthumb.jpg" width="200" height="200"
    alt="Fun with Synths">
    <span><img src="images/synths.jpg" width="400" height="400" alt="Fun with Synths"><br>
    Fun with Synths</span></a>
</li>
<li>
    <a href="images/tallon.jpg"><img src="images/tallonthumb.jpg" width="200" height="200"
    alt="Tallon">
    <span><img src="images/tallon.jpg" width="400" height="400" alt="Tallon"><br>
    Chris & Tallon</span></a>
</li>
    </ul>
</div>
</div>
<div class="nav">
    <a href="index.html">Home</a>
    &nbsp;
    <a href="services.html">Services</a>
    &nbsp;
    <a href="media.html">Media</a>
    &nbsp;
    <a href="about.html">About</a>
    &nbsp;
    <a href="blog.html">Blog</a>
    &nbsp;
    <a href="contact.html">Contact</a>
</div>
    </div>
</body>
</html>

И мой CSS выглядит так:

body {background-color: #A0A0A0; background-image: url(images/background.jpg);}
#wrapper {margin-left: auto;margin-right: auto;width: 80%; min-width:  960px;box-shadow: inherit;}
h1 { text-align: center;
    background-color: #FFFFFF;
    padding-right: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 10px;
    font: 55px/1.4em nimbus-sans-tw01con,sans-serif;
    color: #3F3E91;
}
#nav {font-family: anton, sans-serif;font-size: large;padding: 5px; float: left;width:
160px;padding-top: 20px;padding-right: 5px; padding-bottom: 5px;padding-left: 20px;}
#nav a { text-decoration: none; }
#nav a:link{color: #3F3E91;}
#nav a:visited {color: #0066CC;}
#nav a:hover {color: #000000;}
#nav ul { list-style-type: none;margin: 0;padding-left: 0; }
#content{background-color: #FFFFFF;margin-left: 160px;padding-top: 1px;padding-left: 20px;padding-right: 20px;}
#footer {font-size: .70em; font-style: italic; text-align: center;padding: 10px;}
.nav {text-align: center;}
.clear {clear: both;}
.address{text-align: center;}
#mobile { display: none; }
#desktop { display: inline; }
#gallery {
position: relative;
clear: both;
}

#gallery ul {
width: 300px;
list-style-type: none;
}


#gallery img {
border-style: none;
float: none;
padding: 0;
}

#gallery a {
text-decoration: none;
color: #333;
font-style: italic;
}

#gallery span {
display: none;
}

#gallery a:hover span {
display: block;
position: absolute;
top: 10px;
left: 340px;
text-align: center;
}

Любая помощь приветствуется. Благодарность!

html css photos

0

Chris 29 Авг 2014 в 22:46

Answer 1

Я проверил этот код ... и вам нужно поменять разные вещи ...

Вот модифицированный css

#nav {
  float: left;
  font-family: anton, sans-serif;
  font-size: large;
  padding: 20px 5px 5px 20px;
  position: absolute; /*  */
  width: 160px;
}

#content{
  background-color: #FFFFFF;
  margin-left: 160px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 1px;
}

#gallery {
  clear: both;
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
  top: 0;
}

#gallery ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 410px;
}

#gallery ul li {
  display: inline-block;  /* To put 2 images in the same line */
}

И рекомендация: всегда используйте файл сброса css. Это поможет вам увидеть одно и то же во всех браузерах. Основным является

* { margin: 0; padding: 0; }

0

p1errot 29 Авг 2014 в 23:09

Answer 2

Вы можете использовать свойство display.

Свойство display указывает тип поля, используемого для элемента HTML.

Попробуй это:

#gallery li {
    display:inline-block;
}

Демонстрация JSFiddle

0

imbondbaby 29 Авг 2014 в 23:00

Answer 3

Вы можете использовать селектор css3: nth-child, чтобы помочь в этом. Отказ от ответственности: это не будет работать в старых браузерах, таких как IE8 и ниже.

#gallery li { float: left; }
#gallery li:nth-child(odd) { clear: left; }

Если вам нужно, чтобы это работало в более старом браузере, вам нужно будет добавить классы в элементы списка.

<li class="odd">...</li>
<li class="even">...</li>

#gallery li { float: left; }
#gallery li.odd { clear: left; }

0

Lee Wise 29 Авг 2014 в 23:00

Answer 4

Попробуйте следующий CSS:

#gallery {
  font-size:0;
}
#gallery li {
  display:inline-block;
  width:50%;
}
#gallery li img {
  width:100%;
}

Это означает, что элементы вашего списка будут встроенными в блок, то есть они будут располагаться рядом друг с другом (в строке), но вы также можете объявлять для них размеры, как если бы они были блочными элементами.

Затем, когда вы установите ширину на 50%, два элемента списка поместятся в каждой строке.

Затем вам нужно установить размер шрифта в контейнере равным нулю, чтобы пустое пространство между тегами не выталкивало элементы списка вниз на следующей строке.

И, наконец, установка ширины изображений на 100% означает, что они заполнят весь элемент списка, фактически делая их ровно половиной ширины контейнера.

0

senectus 29 Авг 2014 в 23:10

Answer 5

Вы можете попробовать использовать свойство columns:

#gallery ul { columns: 2; -webkit-columns: 2; -moz-columns: 2; }

Дополнительную информацию можно найти здесь.

0

saraluna 29 Авг 2014 в 23:19

Answer 6

Я бы рекомендовал использовать div для создания таблицы с 1 строкой и 2 столбцами. Затем поместите каждое изображение в отдельный столбец. Bootstrap действительно решил эту проблему.

Html:

<div class="row">
  <div class="col-md-6">
  <!-- Place Image 1 div here-->
  </div>
  <div class="col-md-6">
  <!-- Place Image 2 div here-->
  </div>
</div>

Затем вы должны добавить классы row и col-md-6 в свою таблицу стилей. Хотя я настоятельно рекомендую использовать бутстрап, чтобы воспользоваться медиа-запросами.

CSS:

.row {
margin-left: -15px;
margin-right: -15px;
}

.row:before,
.row:after{
content: " ";
display: table;
}

.row:after{
clear: both;
}

.col-md-6 {
 position: relative;
 min-height: 1px;
 padding-left: 15px;
 padding-right: 15px;
 width: 50%;
}

0

JMariña 29 Авг 2014 в 23:58

Выравнивание фото по горизонтали

6 ответов

Вот модифицированный css

Похожие вопросы

Новые вопросы

html