Question

我想要在我的网站上横向显示一系列图像，使用CSS和div。我已经看了几篇关于如何水平显示图像的帖子，我无法让它们中的任何一个工作。

以下是我所指的页面中的代码：

 <head>
 <link rel=StyleSheet href="style.css" type="text/css" media=screen>
 <style>
 div.imageBox {
   float: left;
   margin-right: 10px;
   }

 div.imageBox p {
 text-align: center;
   }

 </style>
 </head>
 <body>
 <?php include 'header.php'; ?>
 <div id="content">
 <div id="container">

 <div class="imageBox">
 <img src="image" width="800" height ="600">
 </div>

 <div class="imageBox">
 <img src="image" width="600" height ="450">
 </div>

 <div class="imageBox">
 <img src="image" width="800" height ="450">
 </div>

 </div>
 </div>
 </body>

这是样式表的代码：

body{
font-family: helvetica, arial, sans-serfif; 
font-size: 14px;}

div#menu {
display: inline;
text-align: center;
width: auto;
top: 20px;
margin-left: 10%;
margin-right: 10%;
background: transparent;
height: 10px;
position: fixed;
}


div#menu ul {
margin: 0;
display: block;
}

div#menu ul li {
padding-right: 55px;
display: inline;
}

div#content {
padding-top: 40px;
text-align: center;
}

div#container{
float: left;
display: inline;
height: 800px;
width: 0px;
}

a:link {
text-decoration: none;
color: #000;
}
a:active {
text-decoration: none;
color: #000;
}
a:visited {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: underline;
color: #000;
}

对我来说，这可能是一种更简单的方法吗？

感谢您的帮助！

Answer 1

尝试更改

div#container{
 float: left;
 display: inline;
 height: 800px;
 width: 0px;
}

到

div#container{
 float: left;
 display: inline;
 height: 800px;
 white-space: nowrap;
}

Answer 2

添加： div.imageBox { 向左飘浮; 保证金权利：10px; 显示：内联; }

当你应该使用内联的东西时，你正在使用块元素的div。

Answer 3

图像将彼此相邻排列。如果你需要div，你可以给它们样式display: inline，使它们以相同的方式运行。您也可以使用float: left，但这会在大多数情况下使事情变得更难。

您也可以将边距和边框等样式应用于图像，因此您可能不需要div。虽然我不确定你想要它看起来如何。

Answer 4

以下是示例：http://jsfiddle.net/hobobne/d5sYM/

<html>
<head>
    <style>
        img {width: 100px; height: 100px;}
        .imageBox {display: inline-block; border: 1px solid grey; background: silver; padding: 4px; text-align: center; font-size: 10px;}
    </style>
</head>
<body>
    <div class="imageBox">
        <img src="http://screenshots.en.softonic.com/en/scrn/80000/80669/easter-icons-5.jpg"><br>
        Image 1
    </div>
    <div class="imageBox">
        <img src="http://l-userpic.livejournal.com/82523298/2181918"><br>
        Image 2
    </div>
    <div class="imageBox">
        <img src="http://www.jellymuffin.com/icons/emo/images/30.jpg"><br>
        Image 3
    </div>
</body>
</html>

我正在尝试使用CSS水平显示图像

4 个答案: