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;
}

非常感谢任何帮助。谢谢！

Answer 1

尝试以下CSS：

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

这是将列表项设置为内联块，这意味着它们将彼此相邻（在行中），但您也可以为它们声明维度，就像它们是块元素一样。

然后，当您将宽度设置为50％时，每行都会有两个列表项。

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

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

Answer 2

您可以使用display属性。

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

试试这个：

#gallery li {
    display:inline-block;
}

<强> JSFiddle Demo

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; }

Answer 4

我已经检查了这段代码......你需要改变不同的东西......

这是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; }

Answer 5

您可以尝试使用columns属性：

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

您可以阅读更多here。

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类添加到样式表中。虽然我强烈建议使用bootstrap来利用媒体查询

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%;
}

水平衬里照片

6 个答案:

这是css修改