<!DOCTYPE html>
<html>
<head>
<title>布局测试</title>
<style type="text/css">
/*第一种方式*/
.div-box1 {
width: 100%;
}
.div1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.div2 {
height: 100px;
background-color: green;
}
/*第二种方式*/
.div-box2 {
width: 100%;
position: relative;
}
.div3 {
position: absolute;
width: 200px;
height: 100px;
background-color: red;
}
.div4 {
margin-left: 200px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="div-box1">
<div class="div1">第一个盒子</div>
<div class="div2">第二个盒子</div>
</div>
<div>测试成功</div>
<div class="div-box2">
<div class="div3">第三个盒子</div>
<div class="div4">第四个盒子</div>
</div>
<div>测试成功</div>
</body>
</html>

　　自己只想到这两种方式，第一种是浮动，第二种为定位效果图如下：

父级div宽度100%,子级一个div宽度固定，另一个宽度自适应的更多相关文章

  1. Vue父子组件通信（父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问）

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

  2. 递归方式---通过子级id，获取子级和父级Name

    #region 递归--返回 父级|子级 名称 #region --返回 父级|子级 名称 public string RetrurnTypeNames(string TypeId) { String ...

  3. (转)MySql 获取所有级联父级或所有级联子级

    from:https://yq.aliyun.com/articles/48885 最近遇到了一个问题,在mysql中如何完成节点下的所有节点或节点上的所有父节点的查询?在Oracle中我们知道有一个 ...

  4. vue结合Ant Design实现后台系统的权限分配(支持无限子级嵌套)

    最近公司的业务需要,要做一个后台管理系统的管理系统类似于这样子 功能需求如下: 左边是权限菜单,右边对应的是具体权限. 1.父级权限菜单选中,父级权限菜单的权限包括其中所有子级权限菜单的权限也要选中, ...

  5. 前端（二十二）—— vue组件：局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList

    Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...

  6. 让一个父级div根据子级div高度而自适应高度

    需求是点击上传的时候进行子级div高度不定,相对来说父级div高度也不能固定,把元素都设置成普通标准流,然后样式可以使用margin内边距或者padding外边距来进行调节 放上代码供参考: .opu ...

  7. <转载>如何解决子级用float浮动父级div高度不能自适应的问题

    转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内 ...

  8. 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...

  9. CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...

随机推荐

  1. 第七章 LED将为我闪烁：控制发光二级管

    LED驱动开发实验 如图所示,LED1-LED2 分别与GPC0_3.GPC0_4 相连,通过GPC0_3.GPC0_4 引脚的高低电平来控制三极管的导通性,从而控制LED 的亮灭. 根据三极管的特性 ...

  2. Linux系统下为何病毒少？原因竟是这个？

    Linux系统下为何病毒少?原因竟是这个? 可能不少人持这样一种观点,认为 Linux 病毒少是因为Linux不像Windows那么普及,其实这种观点很早已经被人批驳过了,一个最有力的论据是:如果写病 ...

  3. [CQOI2018]异或序列

    嘟嘟嘟 前缀和+莫队. 先用前缀和预处理异或,于是问题变成了在\([L - 1, R]\)中求两个数异或等于\(k\)的数对个数. 然后就离线排序,按套路维护两个指针加加减减,并维护一个桶,每一次加\ ...

  4. 微信硬件平台（一） 公众号 ESP8266 Arduino LED

    微信硬件平台 本文目的,使用微信公众号控制ESP8266的LED开和关.进一步使用微信当遥控器(避免写APP或者IOS或者小程序),控制一切设备.给两个关键的总教程参考. 官网教程  微信硬件平台 微 ...

  5. hyperledge工具-configtxlator

    参考:http://www.blockchainbrother.com/article/1337 1.作用: 因为无论配置交易文件 .tx和初始区块文件 .block都是二进制格式,用户无法直接编辑. ...

  6. day12--装饰器

    定义(如何理解装饰器):装饰器本生是闭包函数的一种应用,是指在不改变原函数的情况下为原函数添加新的功能的一个函数.它把被装饰的函数作为外层函数的参数传入装饰器,通过闭包操作后返回一个替代版函数. 遵循 ...

  7. Linux内核入门到放弃-进程管理和调度-《深入Linux内核架构》笔记

    进程优先级 硬实时进程 软实时进程 普通进程 O(1)调度.完全公平调度器 抢占式多任务处理(preemptive multitasking):各个进程都分配到一定的时间段可以执行.时间段到期后,内核 ...

  8. tomcat目录结构以及项目部署

    摘要:tomcat的目录结构 tomcat是一个轻量级的免费开源的web服务器,使用非常方便,也是最普遍的一款优秀服务器. 一.tomcat目录结构 1.官方下载  http://tomcat.apa ...

  9. zabbix API应用

    1.模拟登录 curl -i -X POST -H 'Content-Type:application/json' -d '{"jsonrpc":"2.0",& ...

  10. VMware 中安装虚拟机和宿主机通信

    网络上对于三种连接模式说的很多了,这里就不在具体的说明了.此处采用的NAT模式连接虚拟机,让虚拟机和宿主机互相通讯,并且让虚拟机能访问互联网. 1.首先设置虚拟机的网络,如下图.通过如下操作进入虚拟机 ...