我試圖水平顯示圖像使用CSS

我有一系列的圖像，我想在我的網站上水平顯示，使用CSS和div。我已經看過幾篇關於如何水平顯示圖像的文章，但我無法讓他們工作。我試圖水平顯示圖像使用CSS

下面是從頁，我指的是代碼：

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

是否有可能爲我做到這一點更簡單的方法？

感謝您的幫助！

來源

2011-07-26 bnjmnhrns

add： div.imageBox { float：left; margin-right：10px; display：inline; }

你正在使用的divs是塊元素，當你應該使用某些內聯。

來源

2011-07-26 15:22:23 JaCraig

圖像將對齊排列。如果你需要div，你可以給他們樣式display: inline，使他們的行爲方式相同。您也可以使用float: left，但這在大多數情況下會讓事情變得更加困難。

您也可以將圖像邊距和邊框等樣式應用於圖像，因此您可能不需要div。雖然我不確定你希望它看起來如何。

來源

2011-07-26 15:22:56 GolezTrol

嘗試改變

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

成

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

來源

2011-07-26 15:27:00

-1

這裏是例如：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>

來源

2011-07-26 15:40:13

我試圖水平顯示圖像使用CSS

回答

相關問題