2

我有一个父 div，在父 div 中有两个子 div（一个向左浮动，一个向右浮动）。

网页必须在 1024 像素和 1620 像素的定义上都可以工作，因此如果宽度扩大，它们需要是流畅的。除了左右 div 之间的垂直空间外，所有边距看起来都很好。我正在使用 jquery 来保持两个 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

我觉得你搞错了方向。

流体设计通常用作减少宽度时保留布局的一种方式。

我认为您应该尝试设计最大宽度（此处为 1620px），然后考虑到屏幕可能减小到 1024px 的事实。

此外，如果您希望边距具有恒定的宽度，那么您将不得不实际使用像素，但这会有点困难。

最后但并非最不重要的一点是，您可能希望包含一个 min-width 参数。它不是那么流畅，但是如果您将窗口大小调整为 300 像素，它就太恶心了……

完全拉动它（只是定位的东西）：

.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 回答
1

如果您已经在使用 jQuery 来保持高度，为什么不也使用它来智能地保持宽度呢？

于 2009-10-02T04:02:02.767 回答
1

如果您希望间隙保持均匀，只需固定宽度即可。您仍然可以拥有具有 px 边距的液体布局......

.divLoginRight { margin-left: 10px; }

为什么过于复杂？

于 2009-10-02T04:04:14.247 回答