Как я могу получить три деления с равным интервалом между ними, используя переменную ширину? - PullRequest
Новая
       10

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

1 голос
/ 12 июля 2011

Я разрабатываю веб-страницу с контактной формой, которую вы можете увидеть здесь .

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

В настоящий момент я спроектировал его так, чтобы изображенияцентрированы в DIV с шириной 20%, а контактная форма центрирована в DIV с шириной 60%.Это работает хорошо, но не очень, потому что расстояние между формой контакта и изображениями больше, чем пространство между изображениями и краем области содержимого по мере увеличения ширины браузера.Я хотел бы найти способ сохранить все пробелы равными по ширине.

Вот соответствующий CSS: 

#box {
    width: 100%;
    min-width: 800px;
}

#left {
    float: left;
    width: 20%;

}

#center {
    float: left;
    height: 100%;
    width: 60%;
}

#right {
    height: 100%;
    margin-left: 80%;
}

.dharma {
    width: 185px;
    margin: 0px auto 0;
    padding-top: 25px;
}

#contact-form {
    width: 471px;
    margin: 25px auto;
}

, а вот соответствующий HTML: 

<div id="box">

<div id="left">
<div class="dharma"><img src="images/dharma.jpg"></div> 
</div>

<div id="center">
<div id="contact-form">
[form HTML]
</div>
</div>

<div id="right">
<div class="dharma"><img src="images/dharma.jpg"></div>
</div>

</div>

Может ли кто-нибудь помочь с этим?

Спасибо,

Ник

Ответы [ 2 ]

2 голосов
/ 12 июля 2011

Проблема, которую вы описываете, идеально подходит для макета гибкой коробки CSS3, которая будет работать в Chrome, Safari и Firefox.Все, что вам нужно, это: 

#box {
    display: -moz-box;
    display: -webkit-box;
    display: box;
}

#left, #center, #right {
    -moz-box-flex: 1.0;
    -webkit-box-flex: 1.0;
    box-flex: 1.0;
}

К сожалению, это не сработает в IE, но я надеюсь, что это все еще помогает.

1 голос
/ 12 июля 2011

Будет ли просто установка правила, чтобы все поля имели добавленное поле, не работало?

Примерно так: 

#box {
    width: 100%;
    min-width: 800px;
}

#left, #center, #right { /* adds spacing between columns of equal size */
    margin: 0 2%;
}

#left {
    float: left;
    width: 16%;  /* reduced by 4% for margins */

}

#center {
    float: left;
    height: 100%;
    width: 56%; */ reduced by 4% for margins */
}

#right {
    height: 100%;
    margin-left: 80%;
}
...