html - IE9 中的可选右栏

Question

我有以下内容:

.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 中不支持)...请建议如何使此代码兼容使用此版本的“反叛者”(浏览器。

Answer 1

您需要添加一些 jquery 来实现这一点。

 $(document).ready(function(){
   if ($(".right-content").text().length > 0) {
     $('.right').show();
   } else{
     $('.right').hide();  
   }

这是更新的 fiddle file

希望这能解决您的问题。