如何保持两个流体div之间的间距？
如何保持两个流体div之间的间距？
提问于 2009-10-02 03:39:55
我有一个父div，在父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回答 3
Stack Overflow用户
发布于 2009-10-02 04:02:03
如果您已经在使用jQuery来维护高度，为什么不也使用它来智能地维护宽度呢？
Stack Overflow用户
发布于 2009-10-02 04:04:14
如果你想让间隙保持一致，只需固定宽度即可。你仍然可以有一个流畅的布局和px边距...
.divLoginRight { margin-left: 10px; }为什么要过于复杂呢？
Stack Overflow用户
发布于 2009-10-02 12:13:45
我想你把方向弄错了。
流畅的设计通常被用来在减小宽度时保留布局。
我认为你应该尝试设计最大的宽度(这里是1620px)，然后考虑到屏幕可能会减少到1024px。
另外，如果你想让边距有一个恒定的宽度，那么你将不得不实际使用像素，但这将会有一点困难。
最后但并非最不重要的是，您可能希望包括一个最小宽度参数。它不是那么流畅，但如果你调整你的窗口大小到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%;
}请注意，宽度只是为了确保元素占据尽可能多的空间。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1507651
复制相关文章
相似问题
腾讯云开发者
