Question

喂...

在我的设计中，我几乎总是创建一个父层（div）... w /相对定位; ＆安培;带有'0 auto'的边距，因此它保持在页面的中心位置（因为我几乎总是使用背景图像）...＆amp;然后我的其他div（嵌套在父级内）总是位于绝对 ...其代码看起来像这样：

<div id="Layer1" style="position:relative; width:840px; height:2500px; margin: 0 auto; background color: #FFFFF; layer-background-color: #FFFFFF">
  <div id="Layer2" style="position:absolute; left:0px; top:0px; width:840px; height:222px; z-index:1; background-color: #00CCFF; layer-background-color: #00CCFF; border: 1px none #000000;"></div>
  <div id="Layer3" class="style1" style="position:absolute; left:0px; top:50px; width:840px; height:136px; z-index:1">
    <div align="center">TITLE</div>
  </div>
  <div id="Layer4" style="position:absolute; left:0px; top:250px; width:440px; height:380px; z-index:1"><img src="SomePhoto.jpg" width="440" height="380"></div>
  <div id="Layer5" style="position:absolute; left:300px; top:720px; width:460px; height:330px; z-index:1">Some Text </div>
</div>

......结果如下：

http://www.moonjams.net/EXAMPLE.png

所以......我不是一个专业编码人员......我设计得像一个插图画家就会在杂志页面上设置......但是......鉴于我被告知这个事实从不使用绝对定位（在Parent内部的子div上），我现在如何重新编码该页面（使用我假设用HTML引入的CSS），使它看起来像直到浏览器调整大小...＆amp;然后所有元素都正确地流动，堆叠它们应该的方式......从左到右，从上到下......没有使用已经过时的绝对定位...... ???

[顺便说一下......没有要求我为我完成工作......但是如果有人可以使用几个虚拟图像块提供一个简短的代码示例，我会很感激......或者......直接我在网上提供信息，详细说明了如何做到这一点......感谢。

感谢名单，

DOX

Answer 1

你可以使用亲戚的一切。我已在您发送的图片中对其进行了解释并且您可以使用width: 100%和height: auto创建容器作为部分在此之内你可以创建另一个div，并在其中你有内容图像使用特定的宽度或高度

background-position: center
background-size: cover

下面你有图像
你很高兴... enter image description here

重新编码摆脱绝对定位？

1 个答案: