html - 如何在 HTML、CSS 中显示特定的行格式？

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 中的每一个使用浮动、位置和显示的各种组合，但仍然无法设置正确的组合。帮助将不胜感激！

score 0 · Accepted Answer

如果要对齐diva 中的元素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;
}

工作小提琴

score 0 · Accepted Answer

display: table非常适合：

演示

<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;
}

score -1 · Accepted Answer

.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 - 如何在 HTML、CSS 中显示特定的行格式？

3 回答 3

工作小提琴

Related

Reference