如何让图像并排显示？答案

【问题标题】：How do I make images appear side by side?如何让图像并排显示？
【发布时间】：2011-07-26 23:44:29
【问题描述】：

我搜索了它，但没有找到满意的答案。我要更改 CSS 文件还是 PHP 文件？

其次，有没有比像这样复制粘贴 php 代码更好的方法让页面上出现多个图像：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
 <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
     <title>IS THIS THING ON?</title>
     <link rel="stylesheet" href="./wp-content/themes/cosmicbuddy/_inc/css/screen.css" type="text/css" />
 </head> 
 <body>
    <a href="<?php bp_send_public_message_link() ?>" class="myButton"><!-- button --></a>
 </body> 
 </html>

虽然这是 CSS 代码：

.myButton {
background-image: url(/wp-content     /themes/cosmicbuddy/_inc/images/kaksnuppu.gif);
height: 22px;
width: 22px;
margin-left: 5px;
display:inline;
} 

.myButton:hover {
background-position: 0px 25px;
}

非常感谢！

【问题讨论】：

您的意思是在一个文件中包含两个完整的网页吗？希望不会。
在尝试跑步之前先学会走路。先了解 HTML，然后再学习 CSS，然后再学习 PHP。
在stackoverflow.com/questions/6819962/…的上下文中
@Scott 我正在使用 wordpress 的 buddypress 建立一个社交媒体网站。
@RedFilter，我已经阅读过它，我承认所有这些对我来说都是新的和重要的，但我认为这是一个很好的学习方式。在我带着问题来这里之前，我会先谷歌。

标签： php css image

【解决方案1】：

首先你只需要声明一次页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>IS THIS THING ON?</title> <link rel="stylesheet" href="./wp-content/themes/cosmicbuddy/_inc/css/screen.css" type="text/css" /> </style> </head> <body>  </body> </html>

任何内容都应该在body标签之间。

其次，您可以使用此代码显示图像：

<img src="dir/image.jpg" width="x" height="x" alt="Alt Title">

您可以在 <body> 标记内多次重复此代码。

【讨论】：

【解决方案2】：

查看您的 CSS，您将元素声明为既是块元素又是内联元素。一个覆盖另一个

我建议将您的 CSS 更改为 inline-block 。

（查看修改后的代码）

另请参阅@David Nguyen 的建议

.myButton {
    background-image: url(/wp-content     /themes/cosmicbuddy/_inc/images/kaksnuppu.gif);
    height: 22px;
    width: 22px;
    margin-left: 5px;
    display:inline-block;
}

【讨论】：

display:inline 不会触发宽度和高度 - 背景图像也不会按预期显示。
如果您希望调整属性大小，请使用display:block 或display:inline-block。
我都试过了：display:inline-block;显示：内联；但由于某种原因，它们仍然在彼此下方。
@Easwee 我都试过了：display:inline-block;显示：内联；但由于某种原因，它们仍然在彼此下方。