float等比例布局

最新推荐文章于 2024-03-21 19:18:07 发布
最新推荐文章于 2024-03-21 19:18:07 发布
阅读量1.1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26222859/article/details/78460226
版权


当页面缩小时，想让排列在一行的3个div不换行，该怎么搞定？ 
我的代码主要是这样的... 

<style type="text/css">  
.left {  
    float:left;  
    display:inline;  
}  
.center{  
    float:left;  
    display:inline;  
}  
.right{  
    float:right;  
    display:inline;  
}  
</style>  
<div class="left"><div>  
<div class="center"><div>  
<div class="right"><div>
页面平铺的时候都是正常的，但页面一缩小，div就换行了。 
请大家给点思路！


我先用固定长度把3个div都固定死，页面一缩小还是换行。然后我用百分比把3个div固定死，还是换行。都不知道什么原因。


你要动态调整3个div的宽度 用这个 
<div style="width:100%;" id="outer">   
    <div class="left"></div>      
    <div class="center"></div>      
    <div class="right"></div>     
</div> 


Javascript代码  

<script type="text/javascript">  
    (function _w(){  
        var outer=document.getElementById('outer');  
        var w=outer.offsetWidth;  
        var cw=outer.childNodes[1].offsetWidth;  
        var mlrw=w-cw;  
        if(mlrw<0)return;  
        outer.childNodes[0].style.width=outer.childNodes[2].style.width=Math.floor(mlrw/w*50)+'%';  
    })();  
    window.οnresize=_w;  
</script>

中间那个div给个固定长度


float为什么会换行


在W3school上面找到原因了，原话如下： 
假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。 


也就是如果我把最外层的div宽度固定死，比如960px，就不会发生这样的问题。 
但是如果定义成100%，最外层div下面的第二个div的宽度却是固定的，当我页面缩小时，没有足够的空间可供它浮动，所以就跳到下一行了。。。



摘自：http://www.iteye.com/problems/45251



原创：

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>网站概览</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_400532_4wyibvzj00r1wcdi.css">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link href="../css/comon0.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="all" href="../../../plugins/dateUtil/css/daterangepicker-bs3.css" />
<style>
.chart-row>:first-child{
   margin-left:0;
}
.chart-item{
  float: left;    
   min-height:250px;
    margin-left:10px; 
}
 .chart-row>:last-child{
    float:right;
} 
</style>

</head>
<body >
  <div class="barseach">
    <div class="headbar">
      <h1>网站概览</h1>
   </div>
    <div class="tab_search">
      <form class="form-inline">
        <div id="choiceUL"  style="margin-bottom:5px;display:inline-block;"></div>
           <div class="form-group"><a href="javascript:void(0)" class="btn btn-primary" id="query"  οnclick="query()"><i class="icon iconfont icon-chaxun"></i>查询</a></div>    
      </form>
    </div>
  </div>
 
<div class="padd20"   id="flexCtrl" ng-controller="FlexCtrl"> 
  <div class="chart-row navbox clearfloat" >
          <div class="chart-item padd15 bgwhite "  width-flex="1" row-width="rowWidth"></div>
          <div class="chart-item padd15 bgwhite "  width-flex="1" row-width="rowWidth"></div>
          <div class="chart-item padd15 bgwhite "  width-flex="1" row-width="rowWidth"></div>
  </div>
  
  <div class="chart-row  navbox clearfloat">
          <div id="test" class="chart-item padd15 bgwhite" width-flex="2" row-width="rowWidth"></div>
          <div class="chart-item padd15 bgwhite" width-flex="1" row-width="rowWidth"></div>
  </div>
  
  <div class="chart-row  navbox clearfloat">
          <div class="chart-item padd15 bgwhite" width-flex="1" row-width="rowWidth"></div>
  </div>
<div>    
</body>
<script src="../js/jquery1.11.js"></script>
<script  src="../js/bootstrap.min.js"></script>
<script src="../../../plugins/angular/angular.js"></script>
<script src="../../../plugins/dateUtil/js/moment.js"></script>
<script src="../../../plugins/dateUtil/js/daterangepicker.js"></script>
<script src="../../../js/ToolUtils.js"></script>
<script src="../js/dzgzptTool.js"></script>
<script src="../js/XWFXdatepicker.js"></script>
<script>
var app =angular.module('app',[]);
</script>
<script src="../js/ngFlex.js"></script>
<script>
$(document).ready(function() {
	$("#choiceUL").datepicker();
});
</script>
</html>


自定义ngFlex指令

/*根据比重的大小，确定元素在一行布局中的宽度比例*/
 angular.module("app").controller('FlexCtrl', ['$scope', "$window","$timeout",function ($scope,$window,$timeout) {
	 $scope.rowWidth = $(".chart-row").eq(0).width();
 }]);



angular.module("app").directive("widthFlex",function($window){	
	
	function updateWidthRatio($scope, elem){
		var num = $(elem).siblings().length+1;  
		var flex = parseInt($(elem).attr("width-flex"));
		var flexSum =flex;
		for(var i = 0;i<num-1;i++){
			flexSum += parseInt($(elem).siblings().eq(i).attr("width-flex"));
		}				
		var parentWidth =  $scope.rowWidth;
		var marginLeftWidth =   (num==1)?0:parseInt($(elem).siblings().eq(num-2).css("margin-left"));
		marginLeftWidth = (marginLeftWidth == 0) ?  parseInt($(elem).css("margin-left")) : marginLeftWidth ;
		var ratio = ((parentWidth - marginLeftWidth*(num-1))*flex/flexSum)/parentWidth*100;
		 $(elem).css("width",ratio+"%");
	}
	
	
	return {
		restrict:"A",
		replace:true,
		scope:{
			rowWidth:"="    //隔离作用域下，父控制器$scope上的对象必须作为指令的属性值,这里必须用双向绑定
		},
        link:function ($scope, elem, attrs) { 
        	updateWidthRatio($scope, elem);
        	$scope.$watch(attrs.rowWidth, function (value) {    //在指令里只能监听attrs.rowWidth的变化，不能监听$scope.rowWidth的变化
        		 updateWidthRatio($scope, elem);
            })
        }  
	}
})

//使用float做等比例布局，网页缩放、窗口大小改变情况下会出现换行，所以监听onresize事件，从而重置宽度比例
window.onresize = function(){
	var rowWidth = $(".chart-row").eq(0).width();
	var $scope = angular.element($("#flexCtrl")).scope();
	$scope.rowWidth = rowWidth;
	$scope.$apply();
}




以上布局是用float模拟flex出来的效果，子元素会全部占满父元素的空间。


如果要让子元素不必占满父元素的空间，只要保持相应的比例即可，可以使用bootstrap的栅格布局。

bootstrap的栅格布局中，通过设置内距（padding）从而创建列与列之间的间距。

行容器(.row),其定义了“margin-left”和”margin-right”值为”-15px”，用来抵消第一个列的左内距和最后一列的右内距。

所以bootstrap的栅格布局也不会出现换行的情况。


<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>网站概览</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_400532_4wyibvzj00r1wcdi.css">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link href="../css/comon0.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="all" href="../../../plugins/dateUtil/css/daterangepicker-bs3.css" />
<style>
.row{
   margin-bottom:10px;
}
.row:last-child{
   margin-bottom:0px;
}
.row li a {
   min-height:150px;
}
</style>

</head>
<body >
  <div class="barseach">
    <div class="headbar">
      <h1>网站概览</h1>
   </div>
    <div class="tab_search">
      <form class="form-inline">
        <div id="choiceUL"  style="margin-bottom:5px;display:inline-block;"></div>
           <div class="form-group"><a href="javascript:void(0)" class="btn btn-primary" id="query"  οnclick="query()"><i class="icon iconfont icon-chaxun"></i>查询</a></div>    
      </form>
    </div>
  </div>
 
<div class="padd20"  > 
   <!-- 数据面板 -->
  <div class="indextab navbox" >
    <ul  class="row"   >
    <li class="col-xs-3"><a></a>
    </li>
    <li  class="col-xs-3"><a></a>
    </li>
    <li  class="col-xs-3"><a></a>
    </li>
    <li  class="col-xs-3"><a></a>
    </li>
    </ul>
     <ulclass="row"   >
    <li  class="col-xs-3"><a></a>
    </li>
    <li  class="col-xs-3"><a></a>
    </li>   
    </li>
    </ul>
  </div>
 <!--  数据面板 end -->
  
  <div class="navbox bgwhite padd15"  id="qktj" style="min-height:320px">
  </div>
  
<div>    
</body>
<script src="../js/jquery1.11.js"></script>
<script  src="../js/bootstrap.min.js"></script>
<script src="../../../plugins/angular/angular.js"></script>
<script src="../../../plugins/dateUtil/js/moment.js"></script>
<script src="../../../plugins/dateUtil/js/daterangepicker.js"></script>
<script src="../../../js/ToolUtils.js"></script>
<script src="../js/dzgzptTool.js"></script>
<script src="../js/XWFXdatepicker.js"></script>
<script>
var app =angular.module('app',[]);
</script>
<script>
$(document).ready(function() {
	$("#choiceUL").datepicker();
});
</script>
</html>

效果如下：






zhifeng687
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS布局：Float布局过程与老生常谈的三栏布局
dayuan5183的博客
07-22 320
原文见博客主站，欢迎大家去评论。 使用CSS布局网页，那是前端的基本功了，什么两栏布局，三栏布局，那也是前端面试的基本题了。一般来说，可以使用CSSposition属性进行布局，或者使用CSSfloat属性布局。前者适合布局首页，因为首页上的内容往往可以完全控制。后者适合布局模板，模板中填充的内容你没法控制——比如，在编辑wordpress模板时，你肯定没法考虑每篇博文的长度。这篇博文...
CSS布局(四) float详解
weixin_30546189的博客
02-28 334
一、float设计初衷 因为float被设计出来的初衷是用于——文字环绕效果。即，一个图片一段文字，图片float:left之后，文字会环绕图片。 <div style="width: 100px;height: 100px"> <img src="image/1.jpg" style="width: 50px;height: 50px;floa...
float布局
aoshiyunlong的博客
07-06 245
浮动布局 float布局称之为经典布局,一般来说我个人很多时候用display:flex代替,但是在做图文混排的时候不得不用浮动, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi...
css布局float浮动布局详解，工作半年后才知道的知识
weixin_34062469的博客
11-01 1811
★float属性 页面布局时主要采用：浮动(float)和定位(position)，还有就是即不浮动也不定位的正常文档流结构三种； float属性常用的语法是：float:left|right|none；任何元素都可以被浮动，无论是块元素div，ol，ul还是行内元素span、strong都可以浮动，重要的是任何被声明float的元素都会自动被设置成块元素，也就就...
css float布局
ximingx
01-19 6263
CSS float 布局
CSS Float 浮动布局
blog
07-13 3023
文章目录前言一、Float 布局二、属性值三、代码实现clear 清除浮动clear 属性值三、Float 设计初衷与不足不足总结 前言 在页面开发的过程中，CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。 当前主要的布局方式有：浮动布局(Float)、定位布局(Position)、弹性布局(Flex)、网格布局(Grid)等，本文将从浮动布局开始学习。 一、Float 布局 把一个元素“浮动”(float)起来，会改变该元素本身和在正常
CSS - 浮动布局（float）
热门推荐
伏城之外的博客
07-20 1万+
标准布局、标准流、标准布局的不足、浮动、浮动流、浮动元素特点、脱标、父容器高度塌陷、清除浮动、clear、额外标签法、::after伪元素法、浮动元素margin负值原理、双飞翼布局、圣杯布局、三栏式布局......
float布局讲解
阿豪的博客
08-13 584
今天干活腰酸，年纪轻轻就这样了，不知道要是以后干程序猿会不会更疼，还吃坏肚子，难受的一天，不过我还是拼命为友友们更新。 好了废话不多说，今天我们一起来学习float布局，希望大家多支持，多点赞， 我们先弄三个盒子，正常是下面这样的 然后再三个盒子里面使用float布局 这时候设置的左边盒子最左边显示和右边盒子最右边显示，但是中间的盒子缺不见了。 这是因为中间的盒子没有脱离文档流，默认显示在大盒子的最左边，这时候我们给中间的盒子加宽度以及内容 大盒子明显没有80
float 布局快速入门
_
02-02 1404
一、float概述 二、浮动初探 三、float坍塌问题 一、float概述 浮动（float）是CSS布局常用的一个属性。它可以左右移动，直至它的外边缘碰到包含框或另一个浮动框的外边框。 **float被设计出来的初衷是用于文字环绕效果。**如下代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</tit
带你玩透浮动float布局，详解（一）
最新发布
2302_78067597的博客
03-21 1369
如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）这会出现代码的阅读量挺差，如果开发需要写很多复杂的东西你讲代码写成一行，后期也不能很好的去维护！如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止。如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止。如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界。浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出。
等比例缩放布局（rem和vw）
AMD23的博客
08-04 1282
等比缩放布局（rem布局） 特点：页面里边的元素会根据分辨率等比例放大或缩小. rem是根元素（html）的font-size的倍数。 rem： 指相对于根元素的字体大小的单位。 根元素：会相对设备尺寸自动变换。 VW： 视窗宽度，1vw等于视窗宽度的1%。 ------------------------------------------------------------------------------------------------------- rem配合VW做等比缩放布局 V...
五种前端布局之float布局
qq_39877681的博客
11-18 8374
float布局 float 属性定义元素往哪个方向浮动。 float布局特性 图文环绕效果 float元素脱离了文档流，但是不脱离文本流 文字环绕效果是很明显的，这里要注意一个地方:浮动的块虽然脱离的正常的文档流，但是还会占有正常文档流的文本空间，上图中，p的区域其实是顶到了img的底下的，因为float让img脱离文档流，但是p上的文字却没有顶过去，也就是说p上的一部分文字空间仍然被img占据着，所以从这里也可以看出float的脱离文档流不是完全脱离。 对自身的影响：形成“块”（BFC–块格式化
[css]float按比例三栏布局
weixin_34362991的博客
01-29 391
2019独角兽企业重金招聘Python工程师标准>>> ...
多个DIV让float:left属性，最后一个DIV填满剩余的部分
weixin_30273501的博客
07-01 1064
<DIV style="border:1px solid red; overflow:hidden;zoom:1;"> <DIV style='float:left; background:yellow;'>yellow</DIV> <DIV style='float:left; background:green;'>gr...
实现左边div固定宽度，右边div自适应撑满剩下的宽度的布局方式：
weixin_30731287的博客
03-07 298
html: <div class="container"> 　　<div class="left"> 　　　　left固定宽度200px 　　</div> 　　<div class="right"> 可变宽度rightrightrightrightrightrightrightrightri 　　</div> &...
布局方式-float布局
weixin_30432007的博客
02-11 212
float的特性一 .元素‘浮动’ .脱离文档流 .但不脱离文本流 首先看一个案例，直观的了解下float的特性 <style> 　　.container{ 　　　　background: red; 　　　　width: 400px; 　　} 　　.p1{ 　　　　background: green; 　　　　float: left; ...
CSS Grid布局详解与实例演示
"本次开发大会PPT主要探讨了CSS布局中的Grid系统，讲解了现代Web布局的各种方法，包括古老的table布局、float、inline-block、display: table、position（absolute或relative）以及各种前端框架。特别关注了Flexbox...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值