html - 一行3个DIV

Question

我需要三个 <div>一行中的元素。

例子:

<div class="row">

    <div class="left">
         <!-- width 100% , float:left  -->
    </div>

    <div class="center">
         <!-- width 960px , margin:0 auto  -->

         <div class="sidebar">
              <!-- width 350px , float:right  -->
         </div>

    </div>

    <div class="right">
         <!-- width 100% , float:right  -->
    </div>

</div>

示例图片:

我想为 div.right 设置相同的背景作为div.sidebar .

Answer 1

CSS文件

 .main{ background-color: #ddd;}
.left {

    display: table-cell;
}
.middle {

    display: table-cell;
    width:100%;
}
.right {

    display: table-cell;
}

html代码

<div class="main">
<div class="left"> Some content </div>
<div class="middle"> This should fill the space left </div>
<div class="right"> Some other content </div>
</div>