как сохранить расстояние между двумя жидкостными делителями? - PullRequest
Новая
       7

как сохранить расстояние между двумя жидкостными делителями?

2 голосов
/ 02 октября 2009

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

Веб-страница должна работать как с определениями 1024px, так и с 1620px, поэтому они должны быть плавными, если расширены по ширине. Все поля выглядят хорошо, за исключением вертикального пространства между левым и правым делениями. Я использую 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 ]

1 голос
/ 02 октября 2009

, если вы хотите, чтобы промежуток оставался равномерным, просто исправьте ширину. у вас все еще может быть жидкий макет с полями px .... 

.divLoginRight { margin-left: 10px; }

почему слишком сложный?

1 голос
/ 02 октября 2009

Я думаю, вы ошиблись.

Жидкий дизайн обычно используется как способ сохранения макета при уменьшении ширины.

Я думаю, вы должны попытаться спроектировать для самой большой ширины (здесь 1620 пикселей), а затем принять во внимание тот факт, что экран может быть уменьшен до 1024 пикселей.

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

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

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

1 голос
/ 02 октября 2009

Если вы уже используете jQuery для поддержания высоты, почему бы не использовать ее для разумного поддержания ширины?

...