0

Wapper 包含一个外部 DIV（包含 IMG 的组 DIV）和 3 个内部 DIV（覆盖）。我需要相对于它的容器定位和调整覆盖 DIV 的大小。问题是容器的宽度设置为自动；所以当我将DIVa设置为宽度时，外部DIV的宽度设置为自动，这样当用户调整窗口大小时，它也会相应地调整大小。

这是一个 JFIDDLE 版本：http: //jsfiddle.net/6XsVB/

This is what I get: (it's using the % of the main wrapper. Not the parent DIV)
    +-------------------------------------------------------------------------+
    |  +--------------------------------------------------------+             |
    |  | Group DIV. Height:100%; Width:auto; (contains IMG)     |             |
    |  | +---------------++------------------------------++-----|------------+| This is
    |  | |               ||                              ||     |            || the main 
    |  | |               ||                              ||     |            || wrapper
    |  | |    overlay1   ||          overlay2            ||    overlay3      || DIV 
    |  | |               ||                              ||     |            || Width:1200px 
    |  | |     DIV a     ||            DIV b             ||     |DIV c       || Height:70%  
    |  | |               ||                              ||     |            ||   
    |  | |   Width:20%;  ||        Width:50%;            ||   Width:30%;     || The width of 
    |  | |  Height:100%  ||        Height:100%;          ||   Height:100%;   || this wrapper 
    |  | |               ||                              ||     |            || will change 
    |  | |               ||                              ||     |            || depending on
    |  | |               ||                              ||     |            || the amt of 
    |  | |               ||                              ||     |            || groups used
    |  | +---------------++------------------------------++-----|------------+| inside it 
    |  +--------------------------------------------------------+             | manually.  
    +-------------------------------------------------------------------------+

This is the goal:
    +--------------------------------------------------------------------------+
    |  +--------------------------------------------------------+              |
    |  | Group DIV. Height:100%; Width:auto; (contains IMG)     |              |
    |  | +-----------++------------------------++-------------+ | This is      |
    |  | |           ||                        ||             | | the main     |
    |  | |           ||                        ||             | | wrapper      |
    |  | |  overlay1 ||       overlay2         ||  overlay3   | | DIV          |
    |  | |           ||                        ||             | | Width:1200px |
    |  | |   DIV a   ||         DIV b          ||    DIV c    | | Height:70%   |
    |  | |           ||                        ||             | |              |
    |  | | Width:20%;||     Width:50%;         || Width:30%;  | | The width of |
    |  | |Height:100%||     Height:100%;       || Height:100%;| | this wrapper |
    |  | |           ||                        ||             | | will change  |
    |  | |           ||                        ||             | | depending on |
    |  | |           ||                        ||             | | the amt of   |
    |  | |           ||                        ||             | | groups used  |
    |  | +-----------++------------------------++-------------+ | inside it    |
    |  +--------------------------------------------------------+ manually.    |
    +--------------------------------------------------------------------------+

注意：当浏览器窗口调整大小时，我需要将宽度设置为自动 bc 图像需要调整大小。

4

1 回答 1

0

我仍然不确定你的问题是什么。我认为您是在说您希望group该类与图像的宽度相同。如果这是真的，那么我认为你必须使用 javascript 来做到这一点。问题是没有办法使用 CSS 来计算图像的比例。在您的情况下，您需要根据高度确定宽度是多少。

例如，您的图像宽高比为 5/3。如果高度为 430 像素，则取 430 并乘以 3/5 得到 258 像素的宽度。然后您将手动将宽度设置.group为 258px。

于 2013-04-09T16:14:52.073 回答