我有以下内容:
.container {
background-color: whitesmoke;
display: table;
width: 100%;
height: 150px;
margin: 10px;
}
.main {
background-color: lightblue;
display: table-cell;
width: 100%;
}
.right-content {
background: lightcoral;
margin-left: 16px;
width: 250px;
}
.topb {
border-top: 2px solid #aaa;
}
<div class="container">
<div class="main topb">This is the <b>main</b> content</div>
<div class="right">
<!-- -->
<div class="right-content topb">Optional content</div>
<!-- -->
</div>
</div>
条件如下:
1) main
和right
总是在同一行;
2)如果没有(动态)div right-content
,main
将占用所有宽度(100%);
3) main
和right-content
之间有16px的左边距(如果有的话);
4*) 页面应该在 IE 9 中正确显示...
使用 display:flex
可能会很方便,但在 IE9 中不受支持(兼容性 View 可能会通过,但在真正的 IE9 中不支持)...请建议如何使此代码兼容使用此版本的“反叛者”(浏览器。
最佳答案
您需要添加一些 jquery 来实现这一点。
$(document).ready(function(){
if ($(".right-content").text().length > 0) {
$('.right').show();
} else{
$('.right').hide();
}
这是更新的 fiddle file
希望这能解决您的问题。
关于html - IE9 中的可选右栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29140911/