простая гибкая альтернатива для отображения ширины: поле для IE?

Question

Я пытаюсь реализовать альтернативу display: box для IE, и хотя я понимаю, что flexie предназначен для включения поддержки display: box в IE, я не смог получить этоработает, см. здесь .

Итак, я пытаюсь разработать простую гибкую схему расположения колонок с 3 столбцами.Я попробовал несколько методов, которые я нашел в Интернете, но ни один из них не подходит для HTML, который я использую:

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

В настоящее время я использую следующий CSS для IE:

.box {
    width: 100%;
}

.box1, .box2, .box3 {
    float: left;
    width: 29.5% !important;
    padding: 10px !important;
    height: 245px !important;
}

Но, как вы можете видеть здесь , это не так уж и велико, так как пространство справа от правого поля увеличивается с увеличением ширины окна браузера.Если я попытаюсь установить ширину более 29,5% для блоков, то при уменьшении ширины окна браузера правый блок не уместится.

Может ли кто-нибудь помочь с лучшим обходным решением?

Answer 1

Попробуйте использовать Flexie явно?(не полагаясь на это при анализе ваших стилей)

Предполагается, что вы добавили класс "foo" к внешнему div и добавили соответствующий CSS для каждого блока:

CSS:

.box {
    width: 100%;
    display: box;
    box-orient: horizontal;
    box-pack: justify;
    box-align: stretch;
}

.box1, .box2, .box3 {
    box-flex: 1;
}

JS:

var box = new Flexie.box({
    target : document.getElementById("foo"),
    orient : "horizontal",
    align : "stretch",
    direction : "normal",
    pack : "justify"
});

https://github.com/doctyper/flexie/blob/master/README.md