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

我有一个父母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

来源

2009-10-02 James

在你的HTML中你有'divLoggedInMain'类，但它不在你的CSS？我看到'.divLoginMain'，是一个错字吗？ – Colin

是的，我纠正了.....谢谢 – James

我发现了jQuery宽度的逻辑，所以也许我会尝试将它们合并在一起。 – James

如果您已经使用jQuery保持高度，何不也用它来维持智能的宽度？

来源

2009-10-02 04:02:02

Jquery会很好...尽管我是一个初学者，并不知道足够的代码。我从谷歌搜索的例子中获得了垂直线。我也可以试试谷歌搜索。 – James

如果你想让缝隙保持均匀，只需修复宽度即可。您仍然可以使用px边距进行液体布局....

.divLoginRight { margin-left: 10px; }

为什么过度复杂？

来源

2009-10-02 04:04:14 Jason

如果我左右移动div，我该如何修复空间的宽度？ – James

我会试试....感谢 – James

你有没有尝试将它们都左移，并在最右边的div上保留左边距？ – Jason

我认为你的方向不对。

当减少宽度时，流体设计通常用作保存布局的方法。

我认为你应该尝试设计最大宽度（这里是1620px），然后考虑屏幕可能会减少到1024px的事实。另外，如果你希望margin不管宽度是多少，那么你将不得不使用像素，但是这会有点困难。

最后但并非最不重要的一点，您可能希望包含最小宽度参数。这并不是说流体，但它只是很恶心，如果你调整你的窗口说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-02 12:13:44

我会试试这个。谢谢你Matthieu。 – James

Matthieu，这几乎是工作......但我的两个divs现在不是并排的。如果我看看屏幕的四个象限，我的左侧div位于左上角，右侧div位于右下角。我如何将它们并排放置？ – James

所以，现在我左边的div有右边34％的余量，左边的右边div有67％的余量，但是每个div都占用了100％的宽度。如果两者不是垂直分开的话，会没事的。 – James

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

回答

相关问题