我正在尝试为 IE 实现 display:box 的替代方案,尽管我理解 flexie旨在启用对 display:box 在 IE 中的支持,我无法使其正常工作,请参阅 here .
所以我正在尝试制定一个简单的灵活宽度 3 列布局。我尝试了很多在网上找到的方法,但似乎没有一种适合我使用的 html:
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
目前我正在为IE使用以下CSS:
.box {
width: 100%;
}
.box1, .box2, .box3 {
float: left;
width: 29.5% !important;
padding: 10px !important;
height: 245px !important;
}
但如你所见here , 这不是很好,因为随着浏览器窗口宽度的增加,右侧框右侧的空间也会增加。如果我尝试将框的宽度设置为大于 29.5%,那么当浏览器窗口的宽度减小时,右侧的框将无法容纳。
谁能提供更好的解决方法?
最佳答案
明确地尝试使用 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"
});
关于css - 简单灵活的宽度替代显示 :box for IE?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6882384/