Working Fiddle

Question

我正在尝试在html + css中创建链接行，其格式应如下所示：

（伪码）

<body class="class_with_minmaxwidth_set_in_css">
    <div class="container">
      <div class="row">
        <div class="fixed_left_40px"></div>
        <div class="fluid_center_which_changes_with_window_size"></div>
        <div class="fixed_right_40px"></div>
      </div>
      ... repeat more row divs
    </div>
</body>

我已经尝试了各种组合使用浮动，位置和显示三个div中的每一个，但仍然无法设置正确的组合。帮助将受到高度赞赏！

Answer 1

如果您想在div中对齐line元素，请使用display: inline:block

<div class="row">
    <div class="fixed_left_40px"></div>
    <div class="fluid_center_which_changes_with_window_size"></div>
    <div class="fixed_right_40px"></div>
</div>

CSS：

   .row div{
    display: inline-block;

    height: 40px;
}

.fixed_left_40px{
    width: 40px;    
    background: blue;
}

.fixed_right_40px{
    background: red;
    width: 40px;
}

Working Fiddle

Answer 2

display: table非常适合：

DEMO

<div class="container">
    <div class="row">
        <div class="fixed">40px</div>
        <div class="fluid">fluid</div>
        <div class="fixed">40px</div>
    </div>
</div>

.container {
    display: table;
    width: 100%;
}

.row {
    display: table-row;
}

.row div {
    display: table-cell;
}

.row div.fixed {
    width: 40px;
}

.row div.fluid {
   background: lightGreen;
}

Answer 3

.row div {
    display: inline-block;
}

.row .fixed_left_40px {
    float: left;
    width: 40px;
}

.row .fixed_right_40px {
    float: right;
    width: 40px;
}

请参阅http://jsfiddle.net/Bsrur/

如何在HTML，CSS中显示特定的行格式？

3 个答案:

Working Fiddle