4

.full_height_div高さに基づいて、純粋なcssを使用して要素の幅を設定しようとしています。高さ対幅ではなく、幅対高さでなければなりません。この理由は、親コンテナー ( .set_rectangle_height) が既に、ページ幅に相対的な高さを持つ div であるためです。明らかに、ページのサイズが変更されると、ページのサイズが変更されるため、子divに固定幅を設定することはできません。px.full_height_div

したがって.rectangle、.set_rectangle_heightページのパーセンテージとしての幅と、この幅に相対的な高さを持つ親コンテナーを構成します。この方法の説明については、こちらを参照してください。

height: 100%しかし、問題は、親の内側にdivを配置し、この高さに相対的な幅を持たせたいということです。目的は、ブラウザー ウィンドウのサイズを変更できるようになり、すべてがその縦横比を維持することです。

ここに私の失敗した試みがあります:

.rectangle
{
    position: relative;
    width: 30%;/*the outermost div is always a % of the page
width, even while resizing*/
    display:inline-block;
    background-color: green;
}
.set_rectangle_height
{
    padding-bottom: 30%;/*this sets the height of the outermost div
to a ratio of 1:3*/
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
}
.full_height_div/*this is the div that i want to have a width relative
to its height*/
{
    height: 100%;
    width: 20px;/*i will delete this once .square_set_width is working*/
    position: absolute;
    background-color: red;
}
.square_set_width
{                   
    display: inline-block;
    padding-left: 100%; /*i want to use something like this line to set
the width of this div to be equal to .full_height_div's height - ie a 1:1 aspect
ratio, but padding-left does not work :( */
    position: relative;
    height: 100%;
    background-color: blue;
}

   <div class='rectangle'>
      <div class='set_rectangle_height'>
         <div class='full_height_div'>
            <div class='square_set_width'></div>
         </div>
      </div>
   </div>

上記の間違ったマークアップは次のようになります。

間違ったレイアウト

そして、これは私がそれを次のように見せたいものです:

正しいレイアウト

javascript で青い四角のパーセンテージの高さを見つけて、幅をこの高さと等しくなるように設定できることはわかっていますが、私がやろうとしていることに対する純粋な css 修正があれば非常に便利です。私はこの構造を頻繁に使用しますが、ページ上のすべての div のサイズを変更するコードを書きたくありません。

4

2 に答える 2

0

そのためにはJavaScriptを使用する必要があります。私があなたを理解したなら、あなたは完璧な青い正方形が欲しいです。使用する

var height = $('.square_set_width').height();
$('.square_set_width').css('width',height);

ここにjsfiddleがあります：http：//jsfiddle.net/a8kxu/

編集：代わりにpadding-bottom: 30%行うheight: 70%代わりに。ここに別のフィドルがあります：http：//jsfiddle.net/a8kxu/1/

編集＃2：申し訳ありませんが、これを行うためにcssを使用することはできません。十分に強力ではありません

于 2013-03-23T03:42:34.793 に答える