2

親の中に 2 つの子 div (1 つは左に、もう 1 つは右) を持つ親 div があります。

Web ページは 1024px の定義と 1620px の両方で動作する必要があるため、幅が拡大された場合に流動的である必要があります。左の div と右の div の間の垂直方向のスペースを除いて、すべてのマージンは問題なく表示されます。jquery を使用して、2 つの div の高さを等しく維持しています。div 間のスペースを固定するにはどうすればよいですか? div の幅にパーセンテージを使用しているため、画面の幅を広げると、div 間のスペースが大きくなり、左右のマージンよりもはるかに広くなります。

マークアップ:

<div class="divLoginMain">
<div class="divLoginLeft">
    <div class="divH4Title">
        <h4 class="h4Title">Welcome to Our Website</h4>
    </div>
    <table cellspacing="0" class="borderNone">
        <tr>
        </tr>
        <tr>
        </tr>
    </table>
 </div>
 <div class="divLoginRight">
        <div class="divH4Title">
            <h4 class="h4Title">Status - Logged In</h4>
        </div>    
    <table cellspacing="0" class="borderNone">
        <tr>
        </tr>
        <tr>
        </tr>
    </table>
</div>
</div>

そしてCSS：

.divLoginMain
{
     margin-top:5px;
     margin-left:.6%;
     margin-right:.2%;
border:  solid 3px #191970;
border-spacing: 0;
width:97.5%;
padding-top:7px;
padding-bottom:7px;
padding-left:7px;
padding-right:7px;
overflow:hidden;
}

.divLoginLeft
{
     border:  solid 3px #191970;
border-spacing: 0;
float:left;
width:61.5%;
padding-top:0px;
padding-bottom:10px;
padding-left:16px;
padding-right:16px;
text-align:left;
font-family:Arial;
color:#17238C;
}

.divLoginCenter
{
     border:collapse;
float:left;
width:1px;
}

.divLoginRight
{
     border:  solid 3px #191970;
border-spacing: 0;
float:right;
width:31.5%;
padding-top:0px;
padding-bottom:10px;
padding-left:16px;
padding-right:16px;
text-align:left;
font-family:Arial;
color:#17238C;
}


Thank you,
James
4

3 に答える 3

1

すでに jQuery を使用して高さを維持している場合は、それを使用して幅をインテリジェントに維持してみませんか?

于 2009-10-02T04:02:02.767 に答える
1

ギャップを均一に保ちたい場合は、幅を修正してください。余白が px のリキッド レイアウトを使用することもできます。

.divLoginRight { margin-left: 10px; }

なぜ過度に複雑にするのですか？

于 2009-10-02T04:04:14.247 に答える
1

方向性を間違えたと思います。

流動的なデザインは通常、幅を縮小するときにレイアウトを維持する方法として使用されます。

最大の幅 (ここでは 1620px) で設計してから、画面が 1024px に縮小される可能性があるという事実を考慮する必要があると思います。

また、マージンを一定の幅にしたい場合は、実際にはピクセルを使用する必要がありますが、これは少し難しくなります。

最後になりましたが、min-width 引数を含めることができます。それほど流動的ではありませんが、ウィンドウのサイズを 300px に変更すると、非常にひどいものになります...

それを完全に引っ張る（ちょうど位置決めのもの）：

.divLoginMain
{
margin-top:5px;
margin-left:.6%;
margin-right:.2%;
width:97.5%;
}

.divLoginLeft
{
border:  solid 3px #191970;
float: left;
width: 100%; /* Impossible */
margin-right: 34%;
}

.divLoginRight
{
border:  solid 3px #191970;
float: left;
width: 100%; /* Impossible */
margin-left: 67%;
}

幅は、要素ができるだけ多く占有されるようにするためのものであることに注意してください。

于 2009-10-02T12:13:44.573 に答える