<!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. Linux 小知识翻译 - 「SCP和SFTP」

    这次想说说「SCP和SFTP」. 不管SCP还是SFTP,都是SSH的功能之一.都是使用SSH协议来传输文件的. 不用说文件内容,就是登录时的用户信息都是经过SSH加密后才传输的,所以说SCP和SFT ...

  2. February 26th, 2018 Week 9th Monday

    A good beginning is half done. 良好的开端是成功的一半. We can't finish anything if we don't start, sometimes ge ...

  3. CISCO 动态路由（OSPF)

    OSPF(开放式最短路径优先):是一个内部网关协议(Interior Gateway Protocol,简称IGP),用于在单一自治系统(autonomous system,AS)内决策路由.是对链路 ...

  4. Python3基础-函数实例学习

    内置函数 绝对值函数 x = abs(100) y = abs(-20) print('x=100的绝对值为:{}'.format(x)) print('y=-20的绝对值为:{}'.format(y ...

  5. Teradata 批量查找PI字段

    select * from dbc.indicesv where indextype in ('P','Q');

  6. socket 如何判断远端服务器的连接状态？连接断开，需重连

    fluent-logger-java is a Java library, to record events via Fluentd, from Java application. https://g ...

  7. Nginx使用教程(六)：使用Nginx缓存之FastCGI缓存

    启用FastCGI缓存 <br\>编辑必须启用缓存的虚拟主机配置文件. nano /etc/nginx/sites-enabled/vhost 将以下行添加到server{}指令之外的文件 ...

  8. 完美集群监控组合ganglia和nagios

    Ganglia是伯克利开发的一个集群监控软件.可以监视和显示集群中的节点的各种状态信息,比如如:cpu .mem.硬盘利用率, I/O负载.网络流量情况等,同时可以将历史数据以曲线方式通过php页面呈 ...

  9. Git无法提交，报错

    Failed at the ant-design-pro@2.2.1 lint-staged script. npm ERR! This is probably not a problem with ...

  10. python六十五课——单元测试(一)

    对函数(模块中的)进行函数测试定义两个需要被测试的函数: #求和函数 def mySum(x,y): return x+y #相减函数 def mySub(x,y): return x-y print ...