<!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. 《软工实践》第零次作业 - 一些QA

    <软工实践>第零次作业 - 一些QA Q&A (1)回想一下你初入大学时对计算机专业的畅想 当初你是如何做出选择计算机专业的决定的? 你认为过去两年中接触到的课程是否符合你对计算机 ...

  2. HIVE配置错误信息

    原因:版本问题 解决方法:cp /root/hive/lib/当前的jlinexx.jar /root/hadoop/share/hadoop/yarn/lib

  3. cf 20190307 Codeforces Round #543 (Div. 2, based on Technocup 2019 Final Round)

    B. Mike and Children time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  4. B - Moo Volume

    Farmer John has received a noise complaint from his neighbor, Farmer Bob, stating that his cows are ...

  5. 用PHP打造一个高性能好用的网站

    用PHP打造一个高性能好用的网站 1. 说到高可用的话要提一下redis,用过的都知道redis是一个具备数据库特征的nosql,正好弥补了PHP的瓶颈,个人认为PHP的 瓶颈在于数据库,像Apach ...

  6. 16.ajax_case01

    # 抓取北京市2018年积分落户公示名单 # 'http://www.bjrbj.gov.cn/integralpublic/settlePerson' import csv import json ...

  7. css样式的书写顺序及原理

    刚开始学习前端的时候,每次写css样式都是用到什么就在样式表后添加什么,完全没有考虑到样式属性的书写顺序对网页加载代码的影响.后来逐渐才知道正确的样式顺序不仅易于查看,并且也属于css样式优化的一种方 ...

  8. 【转】dos下 和 批处理中的 for 语句的基本用法

    for 语句的基本用法 : 最复杂的for 语句,也有其基本形态,它的模样是这样的:   在cmd 窗口中:for %I in (command1) do command2 在批处理文件中:for % ...

  9. docker 11 docker的commit操作

    docker commit :表示提交一个容器的副本使之成为新的镜像.假如我们在docker上运行了一个tomcat的容器,对Tomcat容器进行了修改操作,然后我们将修改操作后的tomcat进行co ...

  10. ldconfig 的简单用法

    ldconfig: configure dynamic linker run-time binds. 比如,我编译完 boost 后(boost 的有些库需要编译后生成动态或静态库使用,例如 Pyth ...