css3--网页横向四等分（display:box）

最新推荐文章于 2023-06-13 17:16:47 发布
最新推荐文章于 2023-06-13 17:16:47 发布
阅读量1.8k 收藏
点赞数
分类专栏： little knowledge 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sevenbblythelulu/article/details/46743917
版权
.rule_tab{width: 100%;display:box;display:-webkit-box; display:-moz-box;     box-orient:horizontal;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;}

.rule_tab a{box-flex:1;-webkit-box-flex:1;-moz-box-flex:1; }(占几份)

  这个属性与margin：0 auto;冲突（width：100%；会出现滚动条），改成margin：0px；（谷歌浏览器）

1、与position:fixed冲突
    嵌套div解决
2、与a、img标签冲突 ，偏左或者 不均分
   使之变为块状，position，left，margin-left
3、a、img、p 混合  
    层层嵌套




 
 

  
  <!DOCTYPE html>
 
 

 
 

  
  <html>
 
 

 
 

  
  <head>
 
 

 
 

  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
 

 
 

  
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
 
 

 
 

  
  <meta name="format-detection" content="telephone=no">
 
 

 
 

  
  <link rel="stylesheet" type="text/css" href="css/common.css">
 
 

 
 

  
  <style>
 
 

 
 

  
      /**/
 
 

 
 

  
  .menu{width: 100%; height: 47px; background: rgba(0,0,0,0.8); position: fixed; 
 
 

 
 

  
  	bottom: 0px;}
 
 

 
 

  
  .menu_btn{width: 100%; text-align: right;display: box; display:-webkit-box; display:-moz-box;position: relative; margin:0px;
 
 

 
 

  
    box-orient:horizontal; -webkit-box-orient:horizontal;-moz-box-orient:horizontal; }
 
 

 
 

  
  .menu_btn div{color:#fff; font-size:14px;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1; display: block; text-align: center; }
 
 

 
 

  
  img{display: block; left: 50%; margin-left: -12px; position: relative;}
 
 

 
 


 
 

 
 

  
  /**/
 
 

 
 

  
  </style>
 
 

 
 

  
  </head>
 
 

 
 

  
  <body>
 
 

 
 

  
  <div class="menu " style="margin:0px">
 
 

 
 

  
      <div class="menu_btn">  
 
 

 
 
       
 
 

 
 

  
           <div style="text-align:center;">
 
 

 
 

  
              <p>首页</p>
 
 

 
 

  
              <p><img src="img/index.png" width="21px" height="17px"></p>
 
 

 
 

  
           </div>
 
 

 
 
          
 
 

 
 


 
 

 
 

  
           <div style="text-align:center;">
 
 

 
 

  
              <p>首页</p>
 
 

 
 

  
              <p><img src="img/index.png" width="21px" height="17px"></p>
 
 

 
 

  
           </div>
 
 

 
 
     
 
 

 
 

  
           <div style="text-align:center;">
 
 

 
 

  
              <p>首页</p>
 
 

 
 

  
              <p><img src="img/index.png" width="21px" height="17px"></p>
 
 

 
 

  
           </div>
 
 

 
 
     
 
 

 
 

  
           <div style="text-align:center;">
 
 

 
 

  
              <p>首页</p>
 
 

 
 

  
              <p><img src="img/index.png" width="21px" height="17px"></p>
 
 

 
 

  
           </div>
 
 

 
 

  
      </div> 
 
 

 
 

  
  </div><!--menu-->
 
 

 
 

  
  </body>
 
 

 
 

  
  </html>

sevenbblythelulu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 将一个页面平均分成四个部分（div）
weixin_34174105的博客
08-11 1万+
在项目中遇到需求，数据监控页面需要同时显示4个板块内容，如下图： CSS 如何将一个页面平均分成四个部分（div）呢？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>将页面平均分成四部分</t...
CSS如何让li 4个一行显示
weixin_33963189的博客
04-24 7601
我们在做前端开发的时候，或者仿站的时候，有时候很容易遇到产品列表页显示错位的情况，比如原来4个一行显示，结果却变成了3各一行显示，很难看。原来是你的CSS没有控制好。 有网友问：css 如何控制ul li 每行显示几个并换行 像table效果一样。 今天春哥就给大家讲讲：大家看一下下面的代码，有什么发现： .column .col-4-1 { width: 22.75%; margin-righ...
CSS3实现网页底部半圆展开导航特效
04-06
CSS3实现网页底部半圆展开导航特效是一款效果不错的网站导航菜单特效代码。
css 一行显示四个元素
zhangyongxi123的博客
06-13 1991
动态计算每个元素的宽度 (100%-30px)/4。2 . 跟第一种方法同理。设置固定右边距 10px。
css笔记：如何将一个页面平均分成四个部分？
weixin_34051201的博客
04-13 977
今天，我在刷面试题的时候，突然想到一道题：如何将一个页面平均分成四个部分（div）呢？其实难度也不大，于是直接上代码 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>将页面平均分成四部分&...
详解CSS中的display:flex||inline-flex属性
09-27
主要给大家介绍了CSS中的display:flex和display:inline-flex属性，文中分别通过两段实例代码给大家介绍了display:flex和display:inline-flex的使用效果，感兴趣的朋友们可以参考借鉴，下面来一起看看吧。
CSS3 box-sizing属性详解
12-13
 3、border-box，border和padding计算入width之内，其实就是怪异模式了~ 注意： ie8+浏览器支持content-box和border-box； ff则支持全部三个值。 使用时： -webkit-box-sizing: 100px; // for ios-safari, and
Box-CSS-Framework：Box-CSS框架
02-04
Box-CSS框架是一款基于CSS3技术的前端开发框架，它旨在简化网页布局和设计过程，提高开发效率。作为一款轻量级的框架，Box-CSS提供了预定义的样式、响应式网格系统、易于定制的组件以及对现代浏览器的良好支持。在...
CSS3属性box-shadow使用指南
01-19
今天比较忙，没能好好看新东西，就记录一个常用的CSS3属性吧：box-shadow，表示阴影，如果设置了border-radius圆角，则阴影也是圆角 box-shadow目前是IE9及以上和其他现代浏览器都支持的属性了。 语法： Formal ...
css等比例分割父级容器（完美三等分）
热门推荐
xiaobing_hope的专栏
04-30 7万+
css等比例分割父级容器（完美三等分）          父级容器的宽度一定，要实现子元素等比例完美均分父级宽度，实现方式有哪些？ html部分代码： 方法一： 浮动布局+百分比  （将子元素依次左浮动，根据子元素的个数，设定每个子元素的宽度百分比） 方法二：行内元素（inline-block）+百分比 方法三： 父元素  display:t
CSS实现等分布局的4种方式
09-27
主要为大家详细介绍了CSS实现等分布局的4种方式，等分布局是指子元素平均分配父元素宽度的布局方式，本文将介绍实现等分布局的4种方式，感兴趣的小伙伴们可以参考一下
实现等分布局的 4 种方式
一碗周
12-29 1613
写在前面 对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。 最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。 该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏) 等分布局概述 等分布局就是将一个容器平均分成几等份，这里以 4 等分为例，主要介绍4种方法。 实现等分布局的 4 种方式 在开
HTML如何写出四等分圆,CSS实现等分布局的4种方式
weixin_39717443的博客
07-03 883
原标题：CSS实现等分布局的4种方式在很多页面排版中都会有很多等分排版布局的栏目，本文章主要为大家详细介绍了CSS实现等分布局的4种方式，感兴趣的小伙伴们可以参考一下一: float实现缺点: IE7-浏览器下对宽度百分比取值存在四舍五入的误差用float + padding + background-clip 样式实现代码： 效果图： 二: inline-block实现缺点：需要设置垂直对齐方式...
html将页面分成四部分,html – 如何使用flexbox将网页划分为四个部分？
weixin_36071439的博客
06-03 1477
您可以简化代码并获得所需的输出.在这里,我删除了行并使用了一个容器.这种结构的主要好处是,如果您认为有必要,可以改变列的顺序.我也选择使用flex-basis而不是flex-grow来使它们保持50％的宽度,无论其内容大小如何.在更宽的屏幕上,使用媒体查询,将列设置为50％宽,并将容器设置为：flex; flex-wrap：wrap;.在较窄的屏幕上,以及作为块元素,它们默认堆叠在一起html, ...
css横向布局的几种方式
叶新东老师的博客
11-28 1万+
    首先我们先看看 html部分  bodyTip 内的三个标签我们需要让他们横向显示并且根据浏览器宽度平均显示 &lt;body&gt; &lt;!--头部--&gt; &lt;div class="head"&gt; 我是头部 &lt;/div&gt; &lt;div class="bodyTip"&gt; &lt;!--左边--&gt;
CSS 四等分
卋舉
10-13 615
行内盒子 display:inline-block; 垂直(vertical) vertical-align:top; 多余部分隐藏 overflow:hidden; <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1">
用css将DIV等分布局
chaopingyao的博客
10-07 8323
在工作中经常会出现需要讲一个div等分为几部分的需求，现整理方法如下： 1、借助设置百分比实现均分div，代码如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>将页面平均分成四部分</title> <style type="text/css"> *{ ma
css怎么把圆分成四等分,通过css如何等分一个圆？
weixin_35523259的博客
08-03 1201
This can be done using CSS transforms1) For 12 equal slices, each slice angle will be 30 degrees.2) We need to rotate each slice according to the angle between vertical axis and start of the slice. So...
display: -webkit-box; 和 display: flex
最新发布
10-18
3. 弹性容器的一些属性名不同：比如 display: -webkit-box; 中的 -webkit-box-pack 对应 display: flex 中的 justify-content。 如果你想了解更多关于弹性盒子布局的知识，可以参考以下相关问题：

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值