как поддерживать промежуток между двумя флюидами?

Question

У меня есть родительский div с двумя дочерними div (один плавающий слева и один справа) внутри родителя.

Веб-страница должна работать как с определениями 1024px, так и с 1620px, поэтому они должны быть текущими, если они расширены по ширине. Все поля выглядят отлично, за исключением вертикального пространства между левым и правым div. Я использую jquery, чтобы поддерживать равную высоту двух div. Как я могу сохранить пространство между разделителями? Я использую проценты для ширины div, так как я расширяю ширину экрана, пространство между divs увеличивается, поэтому путь намного шире, чем левое и правое поля.

Разметка:

<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), а затем принять во внимание тот факт, что экран может быть уменьшен до 1024 пикселей.

Кроме того, если вы хотите, чтобы маржа имела постоянную ширину, независимо от того, вы должны будете использовать пиксели, но это будет немного сложнее.

И последнее, но не менее важное: вы можете включить аргумент 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%; 
} 

Обратите внимание, что ширина являются только убедитесь, что элементы занимают как можно больше.