水平排列照片答案

【问题标题】：Lining photos horizontally水平排列照片
【发布时间】：2014-08-29 18:46:12
【问题描述】：

我正在尝试将一些照片放在网页上，我希望它们以两个一组水平放置。现在它们只是垂直向下运行在我的内容区域的左侧。这是我用于图库的代码：

<!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

【解决方案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; }

【讨论】：

【解决方案2】：

您可以使用display 属性。

display 属性指定用于 HTML 的框的类型元素。

试试这个：

#gallery li {
    display:inline-block;
}

JSFiddle Demo

【讨论】：

【解决方案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; }

【讨论】：

【解决方案4】：

试试下面的 CSS：

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

这会将您的列表项设置为 inline-block，这意味着它们将彼此相邻（在一条线上），但您也可以为它们声明尺寸，就好像它们是块元素一样。

然后，当您将宽度设置为 50% 时，每行将容纳两个列表项。

然后您必须将容器上的字体大小设置为零，以便标签之间的空白不会将列表项向下推到下一行。

最后将图像设置为 100% 宽度意味着它们将填满整个列表项，实际上使它们恰好是容器宽度的一半。

【讨论】：

【解决方案5】：

您可以尝试使用 columns 属性：

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

您可以阅读更多here。

【讨论】：

【解决方案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%;
}

【讨论】：