【NEC学习 ---- 布局 -两列， 右侧定宽，左侧自适应】的更多相关文章

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

该篇必须引用初始化样式和功能性样式,样式在前篇 http://www.cnblogs.com/Zell-Dinch/p/4436054.html 中已经提及. 上篇中介绍了左侧定宽,右侧自适应的布局,这篇将介绍类似布局,只是换成了右侧定宽,左侧自适应. html方面 <div class="zell-dm2 g-bd2 f-cb"> <div class="g-mn2"> <div class="g-mn2c">…

NEC学习 ---- 布局 -两列定宽

这个布局相对来说比较容易, 就是最外层的容器中包含两个子容器, 一个容器向右浮动, 另一个向左浮动, 两个容器的宽度+2个容器之间的距离等于外层容易的中宽度. html代码: <div class="g-bd f-cb"> <div class="g-sd"> <p> 我是左侧定宽 </p> </div> <div class="g-mn"> <p> 我是右侧定宽…

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{;;} heade…

NEC学习 ---- 布局 -三列， 左右定宽，中间自适应

---恢复内容开始--- 这个布局很牛掰, 我觉得学习价值很大. 通过这个的学习, 我发现, 能将简单的事情做好, 就距离成功不远了. 其实布局就是利用所学知识, 活用. 在没看这个之前, 发现自己的 html 代码就是够用, 没有一个系统的解决方案, 所以我打算深入地学习一下NEC----一个CSS方案, 让自己的html 和 Css 知识更巩固. 同样希望对大家有用. 话不多说, 先看效果图. 代码如下: HTML代码: <div class="g-bd5 f-cb">…

NEC学习 ---- 布局 -三列，左侧自适应

效果图: html代码: <div id="demo4"> <div class="g-bd4 f-cb"> <div class="g-sd41"> <p>右侧定宽1</p> </div> <div class="g-sd42"> <p>右侧定宽2</p> </div> <div class=&quo…

NEC学习 ---- 布局 -三列，右侧自适应

效果如图 html代码: <div class="g-bd3 f-cb"> <div class="g-sd31"> <p>我是左侧</p> </div> <div class="g-sd32"> <p>我是中间</p> </div> <div class="g-mn3"> <div class=&qu…

table-cell完成左侧定宽，右侧定宽及左右定宽等布局

使用table-cell完成以下几种布局(ie8及以上兼容) 1.左侧定宽-右侧自适应 .left{ width: 300px; height: 500px; border: 1px solid; float: left; } .right{ width: 10000px; height: 500px; display: table-cell; border: 1px solid; } </style> <div class="left"></div>…

css 两列布局中单列定宽单列自适应布局的6种思路

前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现布局 float [思路一]float 说起两列布局,最常见的就是使用float来实现.float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动.如果各浮动元素的高度不同时,可能会出犬牙交错的效果 [1]float + margin 将定宽的一列使用float,而自适应的一列使用计…

CSS布局 两列布局之单列定宽,单列自适应布局思路

前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, flex, grid 这几个布局方式来实现这种效果 float [float + margin] 将定宽的一列使用float,而自适应的一列使用计算后的margin <style> .f1 .parent{overflow: hidden;zoom: 1;} // 触发bfc和haslayout来闭合…

css实现左边定宽右边自适应的5种方法总汇

在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left">左边定宽</div> <div class="right">右边自适应</div> </div 1.浮动布局 左边设置左浮动,右边宽度设置100% .left{width:200px;float:left;background: red…

css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）

(css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知道如何实现左侧可拖动的效果,面试官最后给的提示是设置resize属性+flex布局 resize定义 实现方案:https://codepen.io/jessy90/pen/RJJZPy…

css布局：定宽，自适应

css三栏布局:1.中自:float,absolute,margin三种方法.2.中固:margin,table两种方法. 两边定宽,中间自适应: float: #left{ float:left; width:220px; height:200px; background-color: red; } #right{ float:right; width:220px; height:200px; background-color: red; } #main{ margin:0 230px; he…

布局两列div等高方法

一.左右布局,左侧div绝对定位,外div相对定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> *{margin:0;padding: 0;} .contain…

如何用纯CSS布局两列，一列固定宽度，另一列自适应？

大家都知道好多网站都是左右布局的,很多公司在笔试和面试环节也常常问这个问题.一个去网易的师兄说14年腾讯面试的时候问过这个问题,网易在笔试和面试时候也问过这个问题,还有很多互联网公司也都涉及到这个问题.下面是我的一些小经验,疏漏之处还望大家体谅. 如果不用纯CSS解决此问题的话,我们可以先固定左侧DIV宽度为:100px,然后用JS取得当前浏览器宽度,再减去100px,然后赋值给右侧DIV宽度即可.这样就愉快的解决了,右侧的宽度就是自适应的了. 当然如果不是固定左侧DIV宽度为:100px的话,…

css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法

方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left">Left sidebar</div> <div id="content">Main Content</div> CSS Code <style type="text/css"> *{ margin:; paddi…

从零开始学习前端开发 — 7、CSS宽高自适应

一.宽度自适应 语法:width:100%; 注: a)块状元素的默认宽度为100% b) 当给元素设置宽度为100%时,继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果 二.高度自适应 语法:height:auto;(等同于不给元素设置高度) 三.最小高度,最大高度,最小宽度,最大宽度 1.最小高度 语法: min-height:数值+单位; 注:IE6不识别min-height属性,解决方案如下: 方案一: min-height:100px; _height:100px; 方案二: m…

Layout两列定宽中间自适应三列布局

最容易理解的一种方法,以中间内容为主体,通过 margin 或者 padding 将两侧撑开,最后用 absolute 定位两侧 html: <div class="container"> <div class="left"> </div> <div class="main"></div> <div class="rigth"> </div>&…

bootstrap布局两列或者多列表单

1, 代码如下: <div class="form-group"> <label for="starttime" class="col-sm-2 control-label">实际开始时间</label> <div class="col-md-4"> <input class="form-control" type="text" id…

【HTML+CSS】右侧固定，左侧自适应布局

<style> *{ padding: 0; margin: 0; } #left{ float: right; width: 100%; height: 300px; } #box{ margin-right:220px; background-color: pink; height: 300px; } #right{ float: right; margin-right: -100%; width: 200px; height: 300px; background-color: yello…

NEC学习 ---- 模块 - 左图右文图文列表

该模块效果图: 这个模块也是在开发中经常使用的一种: HTML代码: <div class="container"> <div class="m-list3 m-list3-x"><!-- 这里的 m-list3-x 是什么类呢, 我们下面来揭晓! --> <ul class="f-cb"> <li> <div class="u-img"><a hr…

CSS两列及三列自适应布局方法整理

布局 自适应 两列 三列 在传统方法的基础上加入了Flex布局并阐述各方法的优缺点,希望对大家有所帮助.先上目录: 两列布局:左侧定宽,右侧自适应 方法一:利用float和负外边距 方法二:利用外边距 方法三:利用position 方法四:利用flex布局 三列布局:左右定宽,中间自适应. 方法一:使用负外边距 方法二:使用绝对定位 方法三:使用flex布局 两列布局:左侧定宽,右侧自适应 方法一:利用float和负外边距 <!DOCTYPE html><html lang="…

两列布局，读《css那些事儿》

两列布局: 1.两列定宽: 要点:float.width固定. :after清除浮动. 前提:两列的盒模型宽度相加不能大于父元素的宽度,否则会出现错位现象. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!-- 要点:float.width固定. :after清除浮动. 前提:…

CSS常用布局方式-两列布局、三列布局

CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> table{ width: 800px; height: 300px; border-collapse: collapse; } .left{ background-color: red; } .right{ background-color: blue; } </style> <body>…

css 两列自适应布局的4种思路

前面的话 前面已经介绍过css 两列布局中单列定宽单列自适应布局的6种思路的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和grid来介绍两列自适应布局的4种思路 float [思路一]float 在单列定宽单列自适应的两列布局中,经常用float和负margin配合实现布局效果.但由于margin取值只能是固定值,所以在两列都是自适应的布局中就不再适用.而float和overflow配合可实现两列自适应效果.使用overfl…

css实现三栏布局，两边定宽，中间自适应

1.利用定位实现 css代码如下: .box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} #box1{position: relative;} .left1{;;width: 100px;background: yellow;} .main1{background: #09c;margin: 0 100px 0 100px;} .right1{;;width: 100px;background:…

CSS读书笔记（1）---选择器和两列布局

(1)CSS选择器优先权选择. 优先权从大到小的选择如下: 标有!important关键字声明的属性 HTML中的CSS样式属性 <div style="color:red"></div> 作者编写的CSS文件 <link href='xx.css'> 用户浏览网页在浏览器中设置的样式 浏览器默认的样式 对于ID选择器.类选择器等,其优先级从大到小分别是: 直接在标签中写入样式<div style="color:red"&g…

CSS实现两列布局，一列固定宽度，一列宽度自适应方法

不管是左是右,反正就是一边宽度固定,一边宽度自适应. 博客园的很多主题也是这样设计的,我的博客也是右侧固定宽度,左侧自适应屏幕的布局方式. html代码: <div id="wrap"> <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div> <div id="content" styl…

css布局 - 两栏自适应布局的几种实现方法汇总

这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需: 整理了几种实现方法,当然,风骚的代码不止这几种能实现,欢迎各位的补充. 方法汇总目录 简单粗暴float来实现 absolute"离家出走"定位过去 圣杯布局 - margin负边距 高贵优雅flex轻松搞定 table表示不服气,凭什么我要被抛弃 衍生 - display:table-cell; pc端定死宽?那inline-block携手width也是个好方法 * 以下汇…

css布局之三列布局

网站上使用三列布局的还是比较多的,不过三列和两列有些相似: 1.自适应三列 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三列自适应布局</title> </head> <style> .wrapper{ width: 880px; height: 300px; margin:0…

老生长谈：css实现右侧固定宽度，左侧宽度自适应

反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧? 要实现这种布局,也算比较简单.我们先给出html结构: <div id="wrap"> <div id="sidebar" style="height:240px;">固定宽…