如何实现PHP echo文本与图片并排显示？

嘿，我懂你的困扰——想让图片和PHP输出的文本并排，但调了CSS却没效果对吧？问题核心在于你直接输出的文本没有被包裹在可控制的容器里，浏览器会把它当成普通文本流内容，自然就跑到图片下方了。下面给你两种简单好用的解决方案：

方法一：用inline-block（兼容旧浏览器） #

先给PHP输出的文本套个容器（比如<div>或<p>），然后给这个容器设置和图片一致的inline-block属性，再加上对齐和宽度控制，就能实现并排：

修改后的CSS（page.css） #

.mouse { 
  width: 250px; 
  height: 250px; 
  display: inline-block; 
  vertical-align: top; /* 让图片和文本顶部对齐，避免错位 */
  margin-right: 20px; /* 给两者之间加些间距，更美观 */
}

.text-content {
  display: inline-block;
  width: calc(100% - 290px); /* 总宽度减去图片宽度和间距 */
  vertical-align: top;
}

修改后的HTML #

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="page.css">
<title>page</title>
</head>
<body>
<img class="mouse" src="mouse.jpg" alt="mouse">
<div class="text-content">
<?php echo "Vestibulum maximus nisl vel est sodales, ut fringilla magna ultrices. Nam mi augue, tristique non interdum id, maximus id nisi. Aenean finibus mollis felis vitae pulvinar. Aenean ut vestibulum tellus. Curabitur quis dui turpis. Nunc a luctus nunc. Sed massa neque, consequat sit amet facilisis non, hendrerit at quam. Integer condimentum quam id libero imperdiet, sodales mattis dui aliquam. Fusce tempus ipsum eros, non mattis eros mollis non. Praesent malesuada eros id lorem scelerisque, non commodo purus condimentum. Mauris vitae volutpat lacus. Pellentesque iaculis, purus non bibendum suscipit, nisl est consectetur ligula, mattis pharetra tortor purus a leo. Sed sed luctus nulla. Cras aliquet nisi bibendum sapien efficitur, congue efficitur nunc luctus." ?>
</div>
</body>
</html>

方法二：用Flexbox（现代浏览器首选） #

Flexbox是更简单直观的布局方式，只需要给父容器（这里是<body>）设置display: flex，就能轻松实现并排，还能自动处理间距和对齐：

修改后的CSS（page.css） #

body {
  display: flex;
  gap: 20px; /* 图片和文本之间的间距 */
  align-items: flex-start; /* 可选：让两者顶部对齐 */
}

.mouse { 
  width: 250px; 
  height: 250px; 
}

.text-content {
  flex: 1; /* 让文本容器自动占据剩余空间 */
}

HTML部分和方法一一样，需要把PHP输出的文本包裹在.text-content容器里。

为什么原来的代码没效果？ #

你之前只给图片加了inline-block，但PHP直接输出的文本没有任何容器包裹，浏览器会把它视为匿名文本节点——它会在图片之后占据整行宽度，所以自然就跑到图片下方了。给文本加上容器后，我们就能通过CSS控制它的布局行为，和图片实现并排。

内容的提问来源于stack exchange，提问作者user14541933