CSS布局问题：无法将文本置于标题下方图片旁的指定位置

问题描述 #

刚接触CSS和HTML，正在制作个人首个网站，遇到页面文本定位难题。期望文本位于标题下方、图片旁的居中位置，但尝试多种操作后，仅能调整文本的左右及向下位置，无法向上移动。曾尝试通过margin调整、修改position属性与display属性，均未解决问题。

当前代码 #

CSS代码 #

a {
  text-transform: uppercase;
  display: inline-block;
  padding: 5px;
  margin: 35px 30px;
  text-decoration: none;
}

nav {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 100%;
  height: 100px
}

.navigation ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

.navigation li {
  font-weight: 100;
  letter-spacing: 2px;
  list-style-type: none;
  color: #8D7B68;
  font-size: larger;
}

body {
  background-color: #ffffff;
  margin: 0 auto;
}

li:hover {
  color: #ed2323;
}

#banner {
  background-color: rgba(164, 144, 124, .8);
  background-size: cover;
  background-position: bottom center;
  height: 500px;
  width: 100%;
}

#banner .content h1 {
  border: 3px solid white;
  position: relative;
  top: 50px;
  width: 400px;
  margin: 0 auto;
}

h1 {
  color: white;
  font-size: 42px;
  font-weight: 600;
  text-align: center;
  padding: 10px;
  letter-spacing: 1px;
}

.milk {
  display: flex;
  margin: 0 0 0 150px;
  width: 350px;
  height: 350px;
  border: rgba(164, 144, 124, .9) 3px solid;
}

.milkp {
  margin: 0 675px 0 675px;
  text-align: center;
  max-width: 400px;
}

p {
  color: rgb(0, 0, 0);
  font-size: 15px;
  font-weight: 300;
  padding: 10px;
  letter-spacing: 1px;
  line-height: 25px;
}

HTML代码 #

<nav class="navigation">
  <ul>
    <a href="./index.html">
      <li>početna stranica</li>
    </a>
    <a href="./proizvodi.html">
      <li>proizvodi</li>
    </a>
    <a href="./kontakt.html">
      <li>kontakt</li>
    </a>
  </ul>
</nav>
<div id="banner">
  <div class="content">
    <h1>mliječna čokolada</h1>
    <img src="https://i.pinimg.com/564x/47/99/71/47997186f6af47d86181766d78d55f47.jpg" alt="choco" class="milk">
    <p class="milkp">
      Prvi niz, upućen voljenom mladiću, bolje je uređen i sadrži nekoliko kraćih nizova koji se tiču njihova odnosa ili obrađuju pripadne ideje. Tako soneti 117 potiču mladića da nađe životnu družicu i dobije djecu; soneti 41 i 42 upozoravaju da je pjesnikova
      ljubavnica zavela mladića tijekom pjesnikova izbivanja; soneti 7886 opisuju pjesnikarivala koji je očevidno pokušao pridobiti mladića za sebe; u sonetima 8790 iskazana je zabrinutost da je mladić potpuno zaboravio pjesnika
    </p>
  </div>
</div>

当前效果 #

解决方案 #

问题核心是#banner固定500px高度，加上图片与文本默认块级上下排列、标题用top:50px偏移，导致文本被挤到可视范围外。用Flexbox重构布局即可实现需求：

修改后的CSS代码 #

a {
  text-transform: uppercase;
  display: inline-block;
  padding: 5px;
  margin: 35px 30px;
  text-decoration: none;
}

nav {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 100%;
  height: 100px
}

.navigation ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

.navigation li {
  font-weight: 100;
  letter-spacing: 2px;
  list-style-type: none;
  color: #8D7B68;
  font-size: larger;
}

body {
  background-color: #ffffff;
  margin: 0 auto;
}

li:hover {
  color: #ed2323;
}

#banner {
  background-color: rgba(164, 144, 124, .8);
  background-size: cover;
  background-position: bottom center;
  padding: 60px 20px; /* 替换固定高度，用padding控制内边距 */
  width: 100%;
  box-sizing: border-box; /* 防止padding撑宽容器 */
}

#banner .content {
  display: flex;
  flex-direction: column; /* 标题单独一行，下方内容横向排列 */
  align-items: center; /* 整体内容居中 */
  gap: 30px; /* 控制标题与下方内容的间距 */
}

#banner .content h1 {
  border: 3px solid white;
  width: 400px;
  margin: 0;
}

h1 {
  color: white;
  font-size: 42px;
  font-weight: 600;
  text-align: center;
  padding: 10px;
  letter-spacing: 1px;
}

.milk-wrapper {
  display: flex;
  align-items: center; /* 图片与文本垂直居中对齐 */
  gap: 40px; /* 控制图片与文本的间距 */
  max-width: 1000px; /* 限制最大宽度，避免布局过宽 */
}

.milk {
  width: 350px;
  height: 350px;
  border: rgba(164, 144, 124, .9) 3px solid;
}

.milkp {
  text-align: center;
  max-width: 400px;
  margin: 0; /* 移除原大margin，让文本自然排列 */
}

p {
  color: rgb(0, 0, 0);
  font-size: 15px;
  font-weight: 300;
  padding: 10px;
  letter-spacing: 1px;
  line-height: 25px;
}

修改后的HTML代码 #

<nav class="navigation">
  <ul>
    <a href="./index.html">
      <li>početna stranica</li>
    </a>
    <a href="./proizvodi.html">
      <li>proizvodi</li>
    </a>
    <a href="./kontakt.html">
      <li>kontakt</li>
    </a>
  </ul>
</nav>
<div id="banner">
  <div class="content">
    <h1>mliječna čokolada</h1>
    <!-- 新增容器包裹图片与文本，实现横向排列 -->
    <div class="milk-wrapper">
      <img src="https://i.pinimg.com/564x/47/99/71/47997186f6af47d86181766d78d55f47.jpg" alt="choco" class="milk">
      <p class="milkp">
        Prvi niz, upućen voljenom mladiću, bolje je uređen i sadrži nekoliko kraćih nizova koji se tiču njihova odnosa ili obrađuju pripadne ideje. Tako soneti 117 potiču mladića da nađe životnu družicu i dobije djecu; soneti 41 i 42 upozoravaju da je pjesnikova
        ljubavnica zavela mladića tijekom pjesnikova izbivanja; soneti 7886 opisuju pjesnikarivala koji je očevidno pokušao pridobiti mladića za sebe; u sonetima 8790 iskazana je zabrinutost da je mladić potpuno zaboravio pjesnika
      </p>
    </div>
  </div>
</div>

关键修改说明 #

• 移除#banner的固定高度，改用padding控制内边距，避免内容被截断
• 给.content添加Flex布局，实现标题单独一行、下方内容横向排列的结构
• 新增.milk-wrapper容器，通过Flex实现图片与文本的横向居中对齐，并控制间距
• 移除标题的position: relative和top:50px，改用Flex的gap属性控制标题与下方内容的间距
• 删除.milkp的大margin，让文本自然跟随图片排列

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