如何将文本置于图片旁（如上方）？HTML/CSS布局问题求助

问题根源 #

文本无法和图片对齐的核心原因：

• #text 元素设置了 position: absolute，会脱离正常文档流，导致 float: left 属性完全失效，文本与图片失去布局关联。
• #poza 用 display: block + margin-left: auto 实现靠右，这种设置会让图片独占一行，无法和其他元素并排。

方案一：Flexbox布局（推荐，现代浏览器友好） #

Flexbox是更简洁、易维护的布局方案，能轻松实现元素并排与对齐。

修改后的HTML #

<div id="div1">
  <h1 id="titlu">Titlu</h1>
</div>
<!-- 新增容器包裹图片和文本，统一控制布局 -->
<div class="content-container">
  <p id="text"> &nbsp;&nbsp;&nbsp; Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin libero nunc consequat interdum varius sit amet mattis. <br> Neque volutpat ac tincidunt vitae semper.
    Amet tellus cras adipiscing enim. Id semper risus in hendrerit gravida rutrum quisque non tellus. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat <br> vivamus. Tempor id eu nisl nunc mi ipsum faucibus vitae. Eget gravida cum
    sociis natoque penatibus et magnis. Eu scelerisque felis imperdiet proin. Id diam maecenas ultricies mi eget. Elementum tempus<br> egestas sed sed. Ut tortor pretium viverra suspendisse potenti nullam ac tortor.</p>
  <img id="poza" src="exemplu.jpg" alt="exemplu">
</div>

修改后的CSS #

#div1 {
  text-align: center;
  font-family: serif;
  animation: fadeIn 2s;
  color: white;
  font-style: italic;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

html {
  background-color: black;
}

#poza {
  border: 3px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 500px;
  height: 300px;
  animation: fadeIn 5s;
  /* 移除原有的display:block和margin属性 */
}

#text {
  color: white;
  /* 移除position:absolute和float:left */
  margin-right: 20px; /* 可选：增加文本与图片的间距 */
  flex: 1; /* 让文本自动填充剩余空间 */
}

.content-container {
  display: flex;
  align-items: flex-start; /* 让文本与图片顶部对齐 */
  padding: 0 1%; /* 保留原图片的右侧间距 */
}

方案二：浮动布局（兼容旧浏览器） #

如果需要兼容低版本浏览器，可以用传统浮动实现：

修改后的HTML #

<div id="div1">
  <h1 id="titlu">Titlu</h1>
</div>
<div class="content-container">
  <img id="poza" src="exemplu.jpg" alt="exemplu">
  <p id="text"> &nbsp;&nbsp;&nbsp; Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin libero nunc consequat interdum varius sit amet mattis. <br> Neque volutpat ac tincidunt vitae semper.
    Amet tellus cras adipiscing enim. Id semper risus in hendrerit gravida rutrum quisque non tellus. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat <br> vivamus. Tempor id eu nisl nunc mi ipsum faucibus vitae. Eget gravida cum
    sociis natoque penatibus et magnis. Eu scelerisque felis imperdiet proin. Id diam maecenas ultricies mi eget. Elementum tempus<br> egestas sed sed. Ut tortor pretium viverra suspendisse potenti nullam ac tortor.</p>
</div>

修改后的CSS #

#div1 {
  text-align: center;
  font-family: serif;
  animation: fadeIn 2s;
  color: white;
  font-style: italic;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

html {
  background-color: black;
}

#poza {
  border: 3px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 500px;
  height: 300px;
  animation: fadeIn 5s;
  float: right; /* 让图片靠右浮动 */
  margin-right: 1%;
}

#text {
  color: white;
  /* 移除position:absolute */
  margin-right: 520px; /* 数值等于图片宽度+内边距+边框总和，避免文本跑到图片下方 */
}

/* 清除浮动，防止容器高度塌陷 */
.content-container::after {
  content: "";
  display: table;
  clear: both;
}

内容的提问来源于stack exchange，提问作者Adelin Mihai Sofian