如何借助浮动、位置进行以下布局

Question

...如果可能的话，无需设置 A 和 B div 的任何 ht/wd！ A 和 B 包含与 bg 主 div 重叠的透明图像。

|--------------------|

| -- 主要 -------- |

|--- ---------- ---- |

|-|一个| ---------|B|- |

|--------------------|

感谢您的回复，我正在改进我的 que :: [抱歉造成混淆]

这是我正在尝试的以下布局..

<div id="main" style="width:200px;height:200px;overflow:hidden;">

    <div id="a" style="position:absolute;z-index:2;float:left;"> left side img </div>
    <div id="in" style="float:left;"> main image </div>
    <div id="b" style="position:absolute;z-index:2;float:left;"> rt side image </div>

</div>

其中“a”和“b”包含需要与“in”div 图像重叠的透明图像。

是否可以？

Answer 1

假设您有以下布局结构

<div class="main">
  <div class="a"></div>
  <div class="b"></div>
</div>

如果我理解您的问题，您想让 a 和 b 透明，但没有确切的宽度和高度。正确的？不，至少没有精确的宽度是不可能的。因此，您需要编写以下 css 规则。

以下是一些变体

％值（宽度：20％。高度100％）

.main {width:100%; height:100%}
.a {width:20%; height:100%; background-image:transparent.png; float:left;}
.b {width:20%; height:100%; background-image:transparent.png; float:right;}

或％值（宽度：20％。高度20％）并具有精确定位（您可以放置​​任何您想要的东西50px，它是 a/b div 距顶部和左/右的距离）

.main {width:100%; height:100%}
.a {width:20%; height:20%; background-image:transparent.png; float:left; position:absolute; top:50px; left:50px;}
.b {width:200px; height:200px; background-image:transparent.png; float:right; position:absolute; top:50px; right:50px;}

或像素值

.main {width:100%; height:100%}
.a {width:200px; height:200px; background-image:transparent.png; float:left; position:absolute; top:50px; left:50px;}
.b {width:20%; height:20%; background-image:transparent.png; float:right; position:absolute; top:50px; right:50px;}