Question

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

这是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.    |
    +--------------------------------------------------------------------------+

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

Answer 1

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

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

如何使内部DIV宽度设置为auto的外部div宽度的百分比

1 个答案: