两列适应

两列布局适应的方法很多

1.浮动

这种做法, 需要给每个div的浮动给一个宽度,比较了死板,下面是显示效果,如图:

2.用display:inline-block;

这种做法,会面临display:inline-block的兼容戏问题,另外,你还得解决两个行内块状的间距的问题,你不得不设置font-size:0;(详细地址:http://www.jb51.net/css/76707.html)

效果如下 :

3.用定位position

用定位做,大家会想到两种方法,第一种是:

.left {
    position: absolute; left: 0;
}
.right {
    position: absolute; right: 0;
}

这种有一个问题,父级的高度不能自适应,有时候还不得定宽。

第二种方法:将其中一个定位,另外一个用margin

效果是一样:

这时候,你会发现,右边这个我可以不需要定它的宽度,只需要设置padding,margin。尤其在做响应式,不要求两列发生改变,这个方法为省去不少事

另外,你会注意到一点,我用浮动也可对其中一个,进行左浮动或右浮动,原理是一样,我就不累赘了。

时间: 2024-10-17 13:56:50

两列适应的相关文章

css那些事儿2 经典两列布局

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <link rel="stylesheet" type="text/css" href="css/main.css"> 6 </head> 7 <body> 8 <div id="header">头部</

bootstrap的栅格布局与两列布局结合使用

在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适应,这个时候我就想到了两列布局,将左右设置float,左边设置固定宽度,右边的宽度为calc(100% - 左边的宽度),把这两种布局结合使用就可以实现效果.

如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局

最近在百度 IFE 训练营中看见的一道题目: 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定.右侧部分宽度随浏览器宽度的变化而自适应变化  个人总结出如下三种实现思路: 通过绝对定位实现 See the Pen absolute-two-column by xal821792703 (@honoka) on CodePen. 注意点如下: 需要套一个“positioned”的父元素 div-a 绝对定位,并将位置调整为浏览器左上角 div-b margin-left 属性值为 div-

Angular JS将数据显示为两列(html)

(数据为Array数组)使用AngularJS中ng-show="{{}}",其将数据按行分为奇数行和偶数行,$even是判断是否为奇数行[如果是则为true,不是则为false],$odd判断是否为偶数行,ng-show="{{$even/$odd}}".根据读取数据的需要对需要隐藏的数据进行隐藏和显示. 在写js将数据分为两列时使用for循环取数据进行判断. 1 var oL = document.getElementById('L'); 2 var oR =

两列布局的设置方法总结

今天看到了这样一道题 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定.右侧部分宽度随浏览器宽度的变化而自适应变化 自己感觉有好几种方法,再此总结下: 一.使用position:absolute方法,因为把元素设置为absolute,那元素就脱离了文档流,后面的元素就会占据他原来的位置: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

盒子模型、网页自动居中、float浮动与清除、横向两列布局

1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img input) 盒子模型:边框(border)外边框(margin)内边框(padding)内容(content) 盒子3D模型:border. content+padding .background-img.background-color.margin <html> <head> <

代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)

代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到合意的,所以根据网上找的一段代码,进行了较大改动. 需引用 zepto 或 jquery. 我这个是应用于手机上的,两列瀑布流,图片高度未知——等图片的onloaded事件触发后,才对容器进行计算和定位. 大容器是 $("#imgList"),容器格子是$(".pin"

两列右侧自适应布局

<div class="g-bd1 f-cb"> <div class="g-sd1"> <p>左侧定宽</p> </div> <div class="g-mn1"> <div class="g-mn1c"> <p>右侧自适应</p> </div> </div> </div> /* 两

NEC学习 ---- 布局 -两列, 左侧定宽,右侧自适应

CSS代码:以下两处代码是NEC中CSS初始化样式和功能性样式.今后的NEC研究中,默认这两处是引用的. /* 这是CSS reset 代码 --- 初始化样式 */ /* reset */ html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;

JQuery 实现两列等高并自适应高度

想要使用 JQuery 实现两列等高并自适应高度,其实也很简单,原理就是取得左右两边的高度,然后判断这个值,把大的值赋给小的就行了.看代码: $(document).ready(function() { var _leftheight = jQuery(".left").height(); var _rightheight = jQuery(".right").height(); if (_leftheight > _rightheight) { jQuery