css左右布局,左侧固定,右侧自适应
实现布局的几种方法,见代码:
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.content{
width: 100%;
height: 50px;
border: solid 1px;
margin-top: 10px; }
.content div:first-child{
background: red;
height: 50px;
width:50px;
}
.content div:last-child{
background: green;
height: 50px;
}
</style>
</head>
<body>
<!--浮动-->
<div class="content" >
<div style="float: left;"></div>
<div style="margin-left: 50px;"></div>
</div>
<!--绝对定位-->
<div class="content" >
<div style="position: absolute"></div>
<div style="overflow:hidden;"></div>
</div>
<!--flex-->
<div class="content" style="display:flex;">
<div ></div>
<div style="flex-grow: 1"></div>
</div>
<!--表格-->
<table class="content" style="border-collapse: collapse;">
<tr>
<td style="width:50px;background:red;"></td>
<td style="background:green;"></td>
</tr>
</div>
</body>
</html>
css左右布局,左侧固定,右侧自适应的更多相关文章
- html布局,左侧固定右侧自适应
前几天看到我们的UI稿,要实现左侧固定树结构,右侧自适应.想着自己写过几次但是每次都会忘记,在这里做个笔记. 第一种方法: <!DOCTYPE html> <html lang=&q ...
- flex左右布局 左边固定 右侧自适应
flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...
- 七种CSS左侧固定,右侧自适应两栏布局
一 两栏布局基本HTML和CSS 首先创建基本的HTML布局和最基本的样式. 基本的样式是,两个盒子相距20px, 左侧盒子宽120px,右侧盒子宽度自适应 <div class="w ...
- css布局中左侧固定右侧自适应
float 单一层浮动法左侧固定成100px; 则核心代码 左侧:width:100px;float:left; 右侧 width:auto;margin-left:100px;绝大浏览器是没有任何问 ...
- css中左侧固定,右侧自适应
谈谈我开始出来工作时候的一道面试题吧 当初我记得在太平洋网络面试的时候,面试官给我出了这么一道题: 有一个外层的div 中间有左右两个div 要求左侧的div 1.只告诉你宽度; 2.只告 ...
- css布局之左侧固定右侧自适应布局
参考代码如下: <form id="form1" style="height:100%; overflow:hidden;"> <div st ...
- CSS左侧固定右侧自适应
方法一: float + margin.left{ float: left; width: 100px; }.right {margin-left:100px; } /*清除浮动*/ .contain ...
- 一个简单的左侧固定右侧自适应demo
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
- CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)
经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...
- css左侧固定宽度右侧自适应
左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...
随机推荐
- setitemdata 32位 or 64位
我用SetItemData 和GetItemData把数据库一条数据导入到CListctrl 32位下 程序都可以跑 GetItemData能得到自定义类数据 可以64位得不到?
- [Jenkins]执行SoapUI脚本,怎样在邮件内容里面嵌入html
在Editable Email Notification的Default Content里面加入这样一段: ${FILE,path="result-output/overview-summa ...
- yum 系列(二) 离线部署
yum 系列(二) 离线部署 一.下载 rpm 依赖包 (1) yum 下载 rpm 包 准备一台 全新的 CentOS7 mini 虚拟机 ,联网下载所有所需的 rpm 包和其依赖, yum ins ...
- Python里seed()函数
seed()函数的功功能是每次改变随机数生成器的种子,会改变下一次随机数模块生成的随机数.seed()方法在每次调用随机函数之前使用. 如果种子不变,那么随机函数生成的随机数相同,例如: #!/usr ...
- docker跨主机互联
以下内容只是命令,原理自行百度,google或者官方查阅! 方案一.overlay Consul 三台主机为例(都要安装docker): 192.168.20.20(consul服务) 192.168 ...
- WAMP不能启动, 一直处于红色图标或者橙色图标的解决办法
WAMP不能启动, 一直处于红色图标(正常启动为绿色吧) 考虑是端口的问题,我找到wamp文件夹中的wamp\bin\apache\apache2.2.22\conf路径下的httpd.conf文件, ...
- Electron 安装与使用
Electron是使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用 本文基于Windows进行开发的过程,记录下来,以便日后使用,Electron官网:https://elec ...
- ASP.NET WEBAPI设计(文摘)
HTML5和移动应用推动WEB API的发展 第1部分 基础知识 第1章 因特网,万维网和HTTP协议 1.1 WEB体系结构 资源,URI(统一资源标识符)和表示 URI分为两种类型:URL(统一资 ...
- 看图说说JVM新生代垃圾收集器
- Hdu1429 胜利大逃亡(续) 2017-01-20 18:33 53人阅读 评论(0) 收藏
胜利大逃亡(续) Time Limit : 4000/2000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Total Subm ...