Html I'；我正在尝试使用CSS水平显示图像_Html_Css

Html I'；我正在尝试使用CSS水平显示图像

html css

Html I'；我正在尝试使用CSS水平显示图像,html,css,Html,Css,我有一系列的图像，我想在我的网站上水平显示，使用CSS和div。我已经看过好几篇关于如何水平显示图像的帖子，但都没能让它们发挥作用以下是我所指页面中的代码： <head> <link rel=StyleSheet href="style.css" type="text/css" media=screen> <style> div.imageBox { float: left; margin-right: 10px; } div.

我有一系列的图像，我想在我的网站上水平显示，使用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>

有没有更简单的方法让我这么做

谢谢你的帮助

添加： div.imageBox{ 浮动：左；右边距：10px；显示：内联； }

当您应该内联使用某些内容时，使用的是块元素div。

图像将彼此相邻对齐。如果需要div，可以为它们提供样式

display:inline

，使它们以相同的方式工作。您也可以使用

float:left

，但在大多数情况下，这会使事情变得更困难

您也可以将边距和边框等样式应用于图像，因此可能不需要div。虽然我不确定您希望它看起来是什么样子。

尝试更改

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

进入

以下是一个例子：


img{宽度：100px；高度：100px；}
.imageBox{显示：内联块；边框：1px纯灰色；背景：银色；填充：4px；文本对齐：中心；字体大小：10px；}


图1


图2


图3

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

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

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