HTML/CSS作业问题：调整vertikalni与baner模块布局位置

要实现将vertikalni模块移至header下方并保持水平布局、宽度与header一致的需求，只需调整HTML结构并修改核心CSS样式，避免浮动元素冲突导致的布局崩溃，具体步骤如下：

修改后的HTML结构 #

将#vertikalni模块直接移至header标签之后，避免与下方浮动元素互相干扰：

<div id="wrapper">
  <header>
    <p>Naši najveći pesnici u istoriji književnosti</p>
  </header>
  <!-- 移至header下方 -->
  <div id="vertikalni">
    <div class="baner"></div>
    <div class="baner"></div>
    <div class="baner"></div>
    <div class="baner"></div>
  </div>
  <div id="pesma">
    <h1>Čarobna vrata</h1>
    <p>Na svetu zemlja jedna postoji,<br> puna je svakoga blaga,<br> i sve što ima — podeli svima<br> u tome joj je snaga.</p>
    <p>Hoćeš li kuće, i kuća ima,<br> samo uzmi i gradi,<br> mostove hoćeš, pozovi ljude,<br> džinovski most sagradi.</p>
    <p>Hoćeš li pesme, u njoj se ore,<br> pevaju milioni,<br> svako te tamo na rad zove,<br> a niko te ne goni.</p>
  </div>
  <div id="slika">
    <img src="slike/mira.jpg" alt="Portret">
    <p><b>Mira Alečković</b></p>
  </div>
  <footer>
    <p>Ovo je zadatak čiji je sadržaj preuzet sa <a href="http://www.wikipedia.org">Vikipedije.</a></p>
  </footer>
</div>

修改后的CSS样式 #

重点调整#vertikalni和.baner的布局规则，解决浮动冲突问题：

body {
  background-color: #EEE;
}

#wrapper {
  margin: 0 auto;
  background-color: #CCC;
  border: 5px solid #000;
  width: 692px;
  /*750-2x5-2x24=692*/
  padding: 24px;
}

header {
  border: 2px solid #000;
  height: 46px;
  /*80-2x2-2x15=46*/
  background-color: #FFF;
  padding: 15px;
  margin-bottom: 24px;
}

#slika {
  width: 204px;
  /*238-2x15-2x2=204*/
  height: 366px;
  /*400-2x15-2x2=366*/
  border: 2px solid #000;
  background-color: #FFF;
  margin-left: 24px;
  padding: 15px;
  float: left;
}

#pesma {
  background-color: #FFF;
  width: 254px;
  /*306-2x2-2x24=254*/
  height: 348px;
  /*400-2x2-2x24=348*/
  border: 2px solid #000;
  padding: 24px;
  float: left;
}

#vertikalni {
  width: 100%; /* 与header宽度保持一致 */
  margin-bottom: 24px;
  display: flex; /* 实现内部baner水平布局 */
  gap: 24px; /* 保持与页面其他模块一致的间距 */
}

footer {
  background-color: #FFF;
  height: 18px;
  /*70-2x2-2x24=18*/
  padding: 24px;
  border: 2px solid #000;
  clear: left;
}

footer p {
  margin: 0px;
}

.baner {
  flex: 1; /* 自动平分父容器宽度 */
  height: 98px;
  border: 1px dashed #000;
  background-color: #999;
}

img {
  width: 198px;
  /*202-2x2=198*/
  border: 2px solid #000;
}

关键调整说明 #

1. 结构移动：将#vertikalni移出浮动元素集群，避免浮动元素位置冲突导致的布局塌陷。
2. 水平布局实现：用display: flex替代浮动实现baner的水平排列，flex布局天然支持子元素均匀分布，且不会导致父元素高度塌陷。
3. 宽度适配：#vertikalni设置width: 100%完全填充wrapper宽度，与header视觉宽度一致；.baner用flex: 1自动平分可用空间，无需手动计算宽度。
4. 间距统一：用gap: 24px设置baner之间的间距，与页面其他模块的间距规则保持一致，提升布局协调性。

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