html - 让左边的 div 占据剩余的宽度

Question

我想让我的左边的 div 占用左边的宽度，右边的 div 有一个固定的宽度，不会改变，如下所示:

HTML:

<link rel="stylesheet" type="text/css" href="css/topic.css">
        <div id="topic">
            <div class="post_right"></div>
            <div class="post_left">
                <div class="post_header">
                    <ul style="padding: 0px; margin: 0px; display: inline-block;">
                        <li>
                            <img src="images/eduardo_img.jpg" height="30px">
                            <span style="vertical-align: bottom;">Administrator</span>
                        </li>
                        <li>
                            Group name here
                        </li>
                    </ul>
                    <span style="float: right;">
                        <img src="images/thumb_up.png" height="30" /> 12
                        <img src="images/thumb_down.png" height="30" /> 2
                    </span>
                </div>
                <div class="post_body"></div>
                <div class="user_signature"></div>
            </div>



        </div>

CSS:

#topic{
    width: 100%;
    overflow: hidden;
    border: 1px solid;
    min-height: 200px;
}
.post_left{
    border: 1px solid;
    overflow: hidden;
    display: inline-block;
    min-height: 20px;
    margin: 10px;
}
.post_header{
    height: 30px;
    padding: 5px;
    border: 1px solid;
}
.post_right{
    border: 1px solid;
    width: 300px;
    float: right;
    display: inline-block;
    height: 20px;
    margin: 10px;
}
.post_body{
    height: 200px;
    border: 1px solid;
    margin: 10px;
}
.post_header li{
    vertical-align: bottom;
    padding-left: 10px;
    padding-right: 10px;
    border-right: 1px solid;
}
.post_header li:last-child{
    border: 0px;
}

左边的 div 有一个固定的宽度，中间有一个巨大的空白空间，我该如何解决这个问题？谢谢!

Answer 1

修复了!我所要做的就是从 .post_left div

中删除 Display: inline-block;