Получение блоков одинаковой ширины в Firefox с помощью -moz-box - PullRequest
Новая
       14

Получение блоков одинаковой ширины в Firefox с помощью -moz-box

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

Я использую следующие CSS, чтобы получить три равномерно распределенных блока с гибкой шириной: 

.box {
    display: -moz-box;
    display: -webkit-box;
    display: box;
    width: 100%;
    text-align: justify;
    margin: 20px 0;
}

.box1, .box2, .box3 {
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
    width: 30%;
    padding: 5px;
}

.box2, .box3 {  
    margin-left: 20px;
}

HTML находится в форме: 

<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>

Вы можете увидеть страницу, которой я пользуюсь на здесь .

Это отлично работает в Safari, но в Firefox ширина полей не одинакова. Скорее первое поле в каждом ряду достаточно широкое, чтобы вместить содержимое, а вторые два поля занимают остальную часть ширины. Интересно, может ли кто-нибудь помочь мне с этим CSS, чтобы он работал в Firefox.

Спасибо

Ник

1 Ответ

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

Кажется, что width:0 - это текущий способ размещения гибких блоков (от http://hotmeteor.com/2011/04/22/equals-widths-using-the-css3-flexible-box-layout-module/)

Изменение width:30% CSS-селектора *1008* на width:0 исправляет Firefoxверстка и до сих пор работает в Chrome.

...