WEB前端

CSS div左边宽度固定,右边宽度自适应

位置:首页 > WEB前端 > css教程,2018-08-10 12:08
CSS实现左边宽度固定,右边宽度自适应在初级的前端面试中,这个问题算是经典之一了。当然,解决办法也不止一种。接下来,小编教童靴们实现此效果。童靴们也可以在评论区

CSS实现左边宽度固定,右边宽度自适应

在初级的前端面试中,这个问题算是经典之一了。当然,解决办法也不止一种。接下来,小编教童靴们实现此效果。童靴们也可以在评论区分享你们开发中用到的方法。

如果你觉得无聊的时候,那就学习吧!

关注小白前端,持续收到文章推送。

首先我们先写一下HTML部分:

CSS div(图0)

以上是HTML的结构,下面我们看一下CSS样式如何定义呢?

左边元素固定像素并且浮动,右边元素设置margin-left等于左边元素的宽度

CSS div(图1)

我们在浏览器中看一下效果:

CSS div(图2)

好多网站都是左侧自适应,右侧固定宽度,其实原理都是一样的。小编带大家用另一种方法实现这种效果吧!

首先,html部分是这样滴~

CSS div(图3)

css部分:

左侧浮动,宽度100%。右侧设置margin-left负100%

CSS div(图4)

结果是这样滴~

CSS div(图5)

最后,放上小编第一次做自适应网站用到的方法:

html:

CSS div(图6)

css:

CSS div(图7)

如上给固定的元素加position,自适应的元素加margin-left=固定元素的宽度

TAGS:CSS div

猜你喜欢

NewHot