关于三列布局中间列的居中问题

简介: 请看代码 <style type="text/css"> body{ margin:0; padding:0} .left{ width:100px; background:#06F;float:left; height:100px;} .mid{background:#099; height:100px;} .right{ width:100px; backgr

请看代码

<style type="text/css">
	body{ margin:0; padding:0}
	.left{ width:100px; background:#06F;float:left; height:100px;}
	.mid{background:#099; height:100px;}
	.right{ width:100px; background:#F00; float:right;height:100px;}	
</style>
<body>
<div class="left">1</div>
<div class="right">3</div>
<div class="mid">2</div>
</body>


中间列放最后,然后不给它浮动和宽度就可以了。

目录
相关文章
|
25天前
|
UED
使用约束布局实现居中对齐效果
【10月更文挑战第24天】我们可以看到使用约束布局实现居中对齐并不是一件难事。只要掌握了基本的方法和技巧,结合具体的场景进行灵活运用,就能轻松地实现各种居中对齐效果。在实际开发中,要不断实践和总结经验,以便更好地发挥约束布局的优势,为用户带来更优质的界面体验。
23 1
|
2月前
|
前端开发 容器
前端基础(十五)_多栏布局(两列自适应布局、圣杯布局---三列布局、双飞翼布局--三列布局、等高布局)
本文介绍了前端开发中的多种自适应布局技术,包括两列自适应布局、圣杯布局(三列布局)、双飞翼布局(三列布局)和等高布局。文章通过代码示例展示了如何使用HTML和CSS实现这些布局,以及如何通过flex布局简化实现过程。
88 2
|
前端开发
HTML table 表格内容垂直对齐、边框颜色、标题
HTML table 表格内容垂直对齐、边框颜色、标题
56 0
|
前端开发 容器
table怎么实现部分列固定宽度,其它列宽自适应拉伸
table怎么实现部分列固定宽度,其它列宽自适应拉伸
506 0
table怎么实现部分列固定宽度,其它列宽自适应拉伸
ElementUI:表格table列宽度压缩出现空白
ElementUI:表格table列宽度压缩出现空白
216 0
ElementUI:表格table列宽度压缩出现空白
|
前端开发
html 三列布局(两列自适应,一列固定宽度)
原文:html 三列布局(两列自适应,一列固定宽度) 不做过多解释:主要是记录一个完整的布局样式,实现页面大致三列其中左右两列是自适应宽度,中间固定宽度效果。 不多少代码奉上: CSS样式代码: /******************** *公共标签样式 ***************...
869 0