您的位置：首页 > Web前端 > HTML

html中间块居中宽度自适应

2015-12-31 11:42 471 查看
说来，这个其实不是个多难的事情，但是，若没有经验或者没有了解过html原数在浏览器中显示的顺序，可能还真是个问题，不知如何调整。

先说明下，在确定了左右两边显示的块的宽度后，再让中间块的宽度自适应，这里就有一个前提，必须是中间块最后显示。

css：

.left{ float:left; width:170px; background:#00f; }
.right{ float:right; width:170px; background:#0f0;}
.center{ background:#333; margin:0 170px;}


假如，是按照left, center, right的顺序进行html元素的描述。那么当显示right的时候，就可能出问题。下面就可能不是你想要的结果：

<body>
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</body>


因为它的展示效果如下：



需要将html的元素顺序做下调整，先左右，再中间。如下：

<body>
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</body>


很有用的tips，对于调整页面的布局还是很有用的！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航