IMG 下方 100% 宽度的内容 Div 将无法正确显示在 IMG 下方答案

【问题标题】：Content Divs below IMG with 100% width will not properly display below IMGIMG 下方 100% 宽度的内容 Div 将无法正确显示在 IMG 下方
【发布时间】：2023-03-26 05:12:01
【问题描述】：

问题：我正在尝试为 nag 制作一个带有固定标题的布局，下面将是一个适合页面的图像。在此之下，我想要内容的 div。我面临的问题是我无法让图像和内容 div 都适合屏幕并垂直堆叠。

IMG 设置为绝对值，因为这是我在不调整边距的情况下使其 100% 适合屏幕的唯一方法。但是，当我这样做时，下面的 div 将用于内容：.body2 和 .body3 不显示。

我想让所有内容都与浏览器的屏幕齐平并正确堆叠。

HTML:

<header>
    <div id="headernav">

    </div>
</header>

<div id="FixedBKG">
    <img src="Images/imgbkg.JPG" id="bkgimg"/>
        <div id="content">
            <div class="body2">

            </div>
        </div>

        <div id="content">
            <div class="body3">

            </div>
        </div>
</div>
</body>

CSS：

#headernav {
height: 70px;
top: -10px;
left: 0px;
width: 100%;
background-color: black;
position: fixed;
z-index: 10;
color: white;
margin:0px auto;
}

#FixedBKG {
width: 100%; 
height: 100%; 
}

#bkgimg {
width: 100%;
left: 0px; 
top: 0px; 
position: absolute;
}

.body2 {
background-color: #C0C0C0;
height: 400px;
width: 100%;
left: 0px;
right: 0px;

display: block;
}

.body3 {
background-color: black;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}

【问题讨论】：

这是一个基于您的代码的小提琴（一些更改）。你能告诉我们你想做什么吗？jsfiddle.net/s5q5f
在小提琴上，我希望灰色和黑色的 div 部分位于皮划艇的图片下方。我希望这两个 div 部分具有相同的 IMG 宽度。目前这两个 div 部分位于 IMG 后面，并且不与浏览器窗口的边距齐平。

标签： html css image position

【解决方案1】：

好的，这是第二稿：FIDDLE。

一般cmets：

1.尽量不要在像这样的直接布局上使用定位。

我将图像更改为 display: block 并将其设置为 div 宽度的 100% - 然后它会根据容器自行调整，您可以然后根据需要调整容器。
我更改了两个较低 div 的高度并添加了一个边框，以便您在小提琴中更容易看到它们。
你真的不需要 100% 的宽度，因为根据定义，div 是 100%。
您可以考虑为正文设置样式，并添加一个容器元素，以便在格式设置方面给予您更大的灵活性。

如果您想更改其他任何内容，请告诉我。

CSS

img {
    display: block;
    width: 100%;
}
#headernav {
  height: 70px;
  line-height: 70px;
  text-align: center;
  width: 100%;
  background-color: black;
  color: white;
}
#FixedBKG {
  width: 100%; 
}

.body2 {
  background-color: #C0C0C0;
  height: 200px;
  width: 100%;
  border: 1px solid red;
}

.body3 {
  background-color: black;
  height: 200px;
  width: 100%;
  border: 1px solid  yellow;
}

【讨论】：