[英]simple flexible width alternative to display:box for IE?
我正在尝试为IE实现display:box的替代方案,尽管我了解flexie旨在支持IE中对display:box的支持,但我仍无法使它正常工作,请参见此处 。
因此,我正在尝试制定一个简单的灵活宽度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;
}
但是,正如您在此处看到的那样,它并不是那么好,因为随着浏览器窗口宽度的增加,右侧框右侧的空间也会增加。 如果我尝试将框的宽度设置为大于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"
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.