Question

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

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

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

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

| - | A | --------- | B | - |

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

感谢您的回复，我正在改善我的问题:: [抱歉为了打扰]

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

<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;}

OR％值（宽度：20％。高度20％）并且具有精确定位（您可以放置任何您想要的任何内容而不是50px它与顶部和左/右的距离为/ b divs） < / p>

.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;}

OR像素值

.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;}

如何使用帮助浮动，位置进行以下布局

1 个答案: