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

问题描述：

我想在HTML + CSS，其格式应该是这样创造的链接行：如何在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中的每一个，但仍然无法设置正确的组合。帮助将不胜感激！

你想要什么它看起来像？用当前的html和css创建一个小提琴并上传你想要的布局的模型。 – martincarlin87 2013-04-24 11:56:25

答

如果要对齐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

我必须跑步才能上班，但如果您需要更多帮助，请随时放下评论。 – 2013-04-24 11:57:23

这不提供像OP那样的流体中心单元询问 – Turnip 2013-04-24 12:03:25

@ 3rror404你是什么意思。编辑，现在我明白了。我会相应地更新。 – 2013-04-24 13:17:16

答

.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/

这不提供像OP一样的流体中心单元询问 – Turnip 2013-04-24 12:03:01

它会自动执行@ 3rror404。加上OP没有特别要求流体中心单元。 – 2013-04-24 12:13:52

不，它不。检查你的小提琴http://jsfiddle.net/Bsrur/1/这个更新版本中的中心单元格的宽度。他的问题提到了“fluid_center_which_changes_with_window_size” – Turnip 2013-04-24 12:16:43

答

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

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

Working Fiddle

相关推荐