css横向布局的几种方式

举报
IT 叶新东老师 发表于 2021/12/31 23:27:56 2021/12/31
【摘要】     首先我们先看看 html部分  bodyTip 内的三个标签我们需要让他们横向显示并且根据浏览器宽度平均显示 <body><!--头部--><div class="head"> 我是头部</div><div class="bodyTip...

 

  首先我们先看看 html部分  bodyTip 内的三个标签我们需要让他们横向显示并且根据浏览器宽度平均显示


  
  1. <body>
  2. <!--头部-->
  3. <div class="head">
  4. 我是头部
  5. </div>
  6. <div class="bodyTip">
  7. <!--左边-->
  8. <div class="leftTip itemDiv" style="background: red">我在左边</div>
  9. <!--中间-->
  10. <div class="centerTip itemDiv" style=" background: yellow">我在中间</div>
  11. <!--右边-->
  12. <div class="rightTip itemDiv" style=" background: green">我在右边</div>
  13. </div>
  14. <div class="bottomTip">我是底部</div>
  15. </body>

 

1、table 布局

    记得我们最初的刚学的时候是用html 的 table来布局的,但是只能应用一些简单的布局,对于复杂的布局页面,代码会显的很乱,现在css也可以用table了

css如下


  
  1. .bodyTip{
  2. display: table;
  3. table-layout: fixed;
  4. }
  5. .itemDiv{
  6. display:table-cell;
  7. }

2、flex 配合  justify-content

   这2个命令配合会自动平均分给每个div,如果需要指定每个不同的宽度,使用width即可,这里只演示最简单的功能

    css代码


  
  1. .bodyTip{
  2. display: flex;
  3. justify-content: space-between;
  4. border: 1px solid;
  5. }

  效果图

 

3、flex 另一种方式 ,这种方式自动填充了背景色

    css代码


  
  1. .bodyTip {
  2. display: flex;
  3. border: 1px solid;
  4. .itemDiv {
  5. /* flex 取值0 ~ 1 */
  6. flex: 1;

  效果图

 

 

3、当然还可以用float 布局,但是这种方式会产生很多问题,本人建议慎用,但是可以配合fiex 一起使用

4、之前见有人用过绝对定位和相对定位配合使用达到布局效果,昨天试了一下,实在是做不出来

注意:flex布局在移动端用的比较多,pc端会有兼容性问题,具体请查阅百度

 

文章来源: yexindong.blog.csdn.net,作者:java叶新东老师,版权归原作者所有,如需转载,请联系作者。

原文链接:yexindong.blog.csdn.net/article/details/84579464

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。