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>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolore est et itaque nesciunt nobis officia omnis optio similique vitae. Cupiditate eum exercitationem harum id iusto maiores quaerat reprehenderit sint.
</div>
效果如下:
(调整窗口大小,来测试右侧是否根据窗口大小改变)
2、右侧定宽-左侧自适应
<style>
.right{
width: 200px;
height: 500px;
border: 1px solid;
display: table-cell;
}
.left{
height: 500px;
border: 1px solid;
display: table-cell;
}
.parent{
display: table;
table-layout: fixed;
width: 100%;
}
</style> <div class="parent">
<div class="left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam, assumenda dolores eaque, fugiat illo, in inventore itaque magni nemo nisi nulla obcaecati quaerat totam unde voluptatem voluptatum. Amet, totam.
</div>
<div class="right"></div>
</div>
效果如下:
与左侧定宽稍有不同,虽然只是定宽的位置换了,但是不能直接使用浮动像左侧定宽那种方式完成。
3、左右定宽-中间自适应
<style>
.parent{
display: table;
table-layout: fixed;
width: 100%;
}
div{
border: 1px solid;
}
.left,.right,.center{
display: table-cell;
}
.left{
width: 100px;
height: 200px;
}
.right{
width: 100px;
height: 200px;
}
</style> <div class="parent">
<div class="left"></div>
<div class="center">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet delectus ducimus ea eos eum, libero modi quia, soluta temporibus unde,
ut. Aliquam, dolorem ipsam porro quae quisquam saepe vitae!
</div>
<div class="right"></div>
</div>
效果如下:
table-cell完成左侧定宽,右侧定宽及左右定宽等布局的更多相关文章
- web实现点击左侧导航,右侧加载不同的网页(这种布局多用于后台管理系统)
(1)实现方法:采用ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) ( ...
- CSS基础布局--居中对齐,左侧定宽右侧自适应
CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一 ...
- css左侧固定宽度,右侧自适应的几种实现方法
左侧固定,右侧自适应或者右侧固定在,左侧自适应是一样的.这种布局很常见,而且面试过程中也经常会问到,这里我总结的方法一共有5种.要实现这种布局,也算比较简单.我们先给出html结构: <div ...
- css经典布局之左侧固定大小右侧自动适应
最近学习了一种经典布局,固定左侧或右侧的宽度,另一侧自适应宽度,此种布局挺常用,尤其是像后台,大部分都是采用这种结构,还比如像订餐类的APP,进入商家的时候,会出现一堆饭的列表,左侧是饭的分类,右侧是 ...
- CSS 实现左侧固定,右侧自适应两栏布局的方法
"左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...
- 为什么说要搞定微服务架构,先搞定RPC框架?
今天开始聊一些微服务的实践,第一块,RPC框架的原理及实践,为什么说要搞定微服务架构,先搞定RPC框架呢? 一.需求缘起 服务化的一个好处就是,不限定服务的提供方使用什么技术选型,能够实现大公司跨团队 ...
- 【58沈剑架构系列】为什么说要搞定微服务架构,先搞定RPC框架?
第一章聊了[“为什么要进行服务化,服务化究竟解决什么问题”] 第二章聊了[“微服务的服务粒度选型”] 今天开始聊一些微服务的实践,第一块,RPC框架的原理及实践,为什么说要搞定微服务架构,先搞定RPC ...
- 基于jQuery左侧小图滚动右侧大图显示代码
今天给大家分享一款 jQuery左侧小图滚动右侧大图显示代码是一款基于jQuery实现的左侧滚动图片点击大图查看效果代码.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari. ...
- css布局--两列布局,左侧固定,右侧自适应(其中左侧要可以拖动,右侧水平滚动条)
(css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...
- ajax实现简单的点击左侧菜单,右侧加载不同网页
实现:ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) 原理:ajax的 ...
随机推荐
- 中控考勤机-C#操作
引用:Interop.zkemkeeper.dll 实例化: public zkemkeeper.CZKEM axCZKEM1 = new zkemkeeper.CZKEM(); 首先从数据库中获取考 ...
- 重写OnPaint事件对窗体重绘 实例1
public class WindowOne:Form { public WindowOne() { InitializeCompnent(); } public void InitializeCom ...
- unity绘制线和绘制面
绘制线条代码,其实就是指定至少两个点,然后赋予贴图即可,不废话,上代码: using UnityEngine; using System.Collections; public class LineT ...
- Asp.net mvc4 + HighCharts + 曲线图
前端代码: @{ Layout = null;}<!DOCTYPE html><html><head> <title></title> &l ...
- C# winform 窗体弹出选择目录或文件 的对话框
//弹出一个选择目录的对话框 privatevoid btnSelectPath_Click(object sender, EventArgs e) //弹出一个选择目录的对话框 { FolderBr ...
- file_get_contents 获取不了网页内容
服务器在做验签的过程中,经常需要向渠道服务器获取某个用户的信息.一般有两种方法,curl和file_get_contents. 一般情况下,像这样用,不会有问题. public function Oa ...
- mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in
从字面的意思上说:这个函数要被弃用,请使用 mysqlli 或者是 PDO 代替 然后就查手册发现没说,大家一定要查官方最新的手册
- win32下用VC扩展PHP全过程
闲着无聊,打算开发一些PHP组件来玩玩,由于在家没有工作环境,遂打算在win32(我的环境是vista)用VC开发DLL模块,费话不 多说了,进入正题: 一.已经在机器上安装PHP环境的就略过,否则先 ...
- DataTables在回调方法中使用api
$(document).ready(function() { $('#example').dataTable( { "initComplete": function () { va ...
- 答:我们公司的ASP.NET 笔试题,你觉得难度如何
闲来无事,逛逛园子,发现有个面试题,觉得有意思.已自己的理解答来看看,不足之处,请多指教. 原文地址:http://www.cnblogs.com/leotsai/p/aspnet-tests-for ...