<!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. Visio画图--我的形状

    本人用的Visio 2013 打开Visio后新建一个拓扑图,发现左侧形状一栏不见了 形状栏可以保存很多自定义图形,怎么才能将形状一栏重新显示出来呢?方法其实很简单,方法如下所示: 这时候我们就会发现 ...

  2. C# 隐藏最大化、最小化和关闭三个按钮

    在Windows的窗体编程中,基本上每一个窗体都是一个最小化.最大化和关闭按钮的. 一.禁用最大化和最小化 对于最大化和最小化按钮,在C#窗体开发时,各一个属性来启用或禁用这两个按钮. this.Ma ...

  3. Java程序设计教程（第2版）阅读总结

    为了重新拣起对Java的回忆,只好又找了本基础书.由于成都高新图书馆的计算机书实在不多,只能找到这本了.简单读了下Java部分,总结如下: 优点:虽然本书也是作者编的而不是作者著的,但是可以看出作者编 ...

  4. 面试----你可以手写一个promise吗

    参考:https://www.jianshu.com/p/473cd754311f <!DOCTYPE html> <html> <head> <meta c ...

  5. 代理 IP 云打码平台的使用

    代理ip 获取代理ip的网站: 快代理 西祠代理 www.goubanjia.com #代理ip import requests headers = { 'User-Agent':'Mozilla/5 ...

  6. Harbor是什么

    第一次听到这个名字应该是2016年初的时候,那是在容器技术已经兴起的,各个容器管理平台正处于群雄逐鹿的时候,mesos.kubernetes.swarm等被国内外各个厂商用来作为容器的管理系统.这个时 ...

  7. UVA12627-Erratic Expansion（递归）

    Problem UVA12627-Erratic Expansion Accept: 465  Submit: 2487Time Limit: 3000 mSec Problem Descriptio ...

  8. 【转】【fiddler】抓取https数据失败，全部显示“Tunnel to......443”

    这个问题是昨天下午就一直存在的,知道今天上午才解决,很感谢“韬光养晦”. 问题描述: 按照网络上的教程,设置fiddler开启解密https的选项,同时fiddler的证书也是安装到系统中,但是抓取h ...

  9. 通过 PHP，可以把文件上传到服务器。

    创建一个文件上传表单 允许用户从表单上传文件是非常有用的. 请看下面这个供上传文件的 HTML 表单: <html> <body> <form action=" ...

  10. 【js】JSDoc 注释规范

    命令名描述 @param @argument 指定参数名和说明来描述一个函数参数@returns 描述函数的返回值@author 指示代码的作者@deprecated 指示一个函数已经废弃,而且在将来 ...