Question

我有一个父div，在父母内部有两个子div（一个浮动，一个浮动）。

网页必须同时适用于1024px定义和1620px，因此如果扩展宽度，它们必须是流畅的。除左右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

Answer 1

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

Answer 2

如果你想让间隙保持一致，只需修正宽度即可。你仍然可以使用px边距进行液体布局....

.divLoginRight { margin-left: 10px; }

为什么过于复杂？

Answer 3

我认为你的方向错了。

流体设计通常用作在减小宽度时保留布局的方法。

我认为您应该尝试设计最大宽度（此处为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%;
}

请注意，宽度只是为了确保元素占用尽可能多。

如何保持两个流体div之间的间距？

3 个答案: