龙空技术网

如何实现css布局、左右定宽中间自适应宽度?

小白甜甜圈 273

前言:

今天各位老铁们对“html怎么向右对齐”大致比较关怀,大家都需要了解一些“html怎么向右对齐”的相关内容。那么小编同时在网络上网罗了一些有关“html怎么向右对齐””的相关资讯,希望各位老铁们能喜欢,同学们快快来学习一下吧!

一开始做这个效果的时候,我用的是图层的方法来控制的,写起来很麻烦。而且到后面的效果也不是很合适,换分辨率小的电脑,中间的内容就会盖到左边的图片上面。用了中间自适应的话就可以避免这个问题啦。

做项目的时候要实现如图这样的一个效果,左右各是一张图片,中间内容自适应宽度

下面举个例子和附上代码简单介绍这个方法,这个布局实现的原理主要是使用float来实现左右环绕,中间的容器设置overflow:hidden来防止容器塌陷,浮动经常会造成一些塌陷问题,所以需要清除浮动,这样设置可以使中间自适应然后左右对齐。

代码如下:

<!DOCTYPE html>

<html>

<head>

<title>css布局小技巧</title>

</head>

<style type="text/css">

.nav{

height: 100px;

background: #fff;

font-size: 16px;

color: red;

line-height: 50px;

text-align: center;

}

.left{

float: left;

background: pink;

width: 200px;

height: 100px;

margin-right: 10px;

}

.right{

float: right;

background: pink;

width: 200px;

height: 100px;

margin-left: 10px;

}

.center{

height: 100px;

background: yellow;

overflow: hidden;

}

</style>

<body>

<div class="nav">

<div class="left">

<p>左边内容定宽、左浮</p>

</div>

<div class="right">

<p>右边内容定宽、右浮</p>

</div>

<div class="center">

<p>中间自适应内容、在HTML中写在最后,渲染顺序从上到下。注意:如果写在前面,还没检测到左右块的宽度,那么center的宽度就自动填充满父级的宽度</p>

</div>

</div>

</body>

</html>

标签: #html怎么向右对齐