JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="main">
<div class="col-left">
寬200,<br/>
左邊有多長右邊就有多長
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
<div class="col-right">
<div>test</div>
<div>test</div>
<div>test</div>
<!-- Bootstrap -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<!-- Bootstrap -->
</div>
</div>
CSS
.main {
position:relative;
}
.col-left {
width: 200px;
background: #f6f6f6;
}
.col-right {
position:absolute;
left:200px;
right:0px;
top:0px;
bottom:0px;
/*margin-left: 200px;*/
}
.col-right::before {
display:block;
height:100%;
width:0px;
float:left;
content: " "
}