第一种  两栏式布局

 <body>

     <!-- 两栏式布局 -->

     <!-- 想要的效果是左边图片右边文字 拉伸盒子文字的高度宽度自动改变 -->

     <div class="box">

         <div class="left">

             <img src="./img/头像.png" alt="">

         </div>

         <div class="right">

             测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字

             测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字

             测试文字测试文字测试文字测试文字测试文字测试文字测测试文字测试文字测试文字测试文字测试文

             字测试文字测试文字测试文字测试文字测试文字

         </div>

     </div>

 </body>
  <style>

         .box {

             width: 500px;

             background-color: #eee;

             overflow: auto;

             /* 下方这个属性可以配合overflow让用户控制div的宽度的大小 */

             /* none    用户无法调整元素的尺寸 */

             /* both    用户可调整元素的高度和宽度 */

             /* vertical    用户可调整元素的高度 */

             resize: horizontal;

         }

         .left {

             width: 200px;

             height: 200px;

             float: left;

         }

         .left img {

             width: 200px;

             height: 200px;

         }

         .right {

             margin-left: 210px;

             /* 不要加这个不然文字会下来 */

             /* float: left; */

         }

     </style>

2、移动端布局

 <body>

     <div class="container">

         <!-- 头部内容 -->

         <header></header>

         <!-- 主题内容 -->

         <main>

             <!-- 主题内容中的导航条 -->

             <div class="title"></div>

             <!-- 主题内容中的重复样式区域 -->

             <div class="list">

                 <div class="one"></div>

                 <div class="one"></div>

                 <div class="one"></div>

                 <div class="one"></div>

                 <div class="one"></div>

                 <div class="one"></div>

                 <div class="one"></div>

                 <div class="one"></div>

                 <div class="one"></div>

                 <div class="one"></div>

                 <div class="one"></div>

                 <div class="one"></div>

                 <div class="one"></div>

             </div>

             <div class="box"></div>

             <div class="box"></div>

             <div class="box"></div>

             <div class="box"></div>

             <div class="box"></div>

         </main>

         <!-- 尾部 -->

         <footer></footer>

     </div>

 </body>
 * {

   margin:;

   padding:;

 }

 /* 设置宽高充满整个手机屏幕 */

 html,

 body {

   width: 100%;

   height: 100%;

 }

 /* 设置最外层大盒子宽高 然后开弹性盒 设置弹性盒内容的排列顺序 为竖向 */

 .container {

   width: 100%;

   height: 100%;

   display: flex;

   flex-direction: column;

 }

 /* 头部设置成宽百分百 高度为定高 */

 header {

   width: 100%;

   height: 1.33333rem;

   background: red;

 }

 /* 主体部分设置成flex ：1  宽百分百 加上overflow: auto;让其主体部分的内容可以滚动 而头部尾部固定不变 */

 main {

   width: 100%;

   flex:;

   overflow: auto;

 }

 main .title {

   width: 100%;

   height: 1.2rem;

   background: blue;

 }

 /* 给主体部分的列表也就是重复性区域加上overflow: auto;可以让其滚动 而主体的标题部分不滚动 */

 main .list {

   width: 100%;

   height: 100%;

   background: #ccc;

   overflow: auto;

 }

 main .list .one {

   width: 100%;

   height: 2.13333rem;

   margin-top: 0.53333rem;

   background: pink;

 }

 main .box {

   width: 100%;

   height: 2.13333rem;

   background: maroon;

 }

 /* 尾部也要设置成定高 */

 footer {

   width: 100%;

   height: 1.12rem;

   background: green;

 }

HTML-CSS的几种布局的更多相关文章

  1. 有关于css的四种布局

    四种布局 (1).左右两侧,左侧固定宽度200px, 右侧自适应占满. (2).左中右三列,左右个200px固定,中间自适应占满. (3).上中下三行,头部200px高,底部200px高,中间自适应占 ...

  2. HTML的三种布局：DIV+CSS、FLEX、GRID

    Div+css布局 也就是盒子模型,有W3C盒子模型,IE盒子模型.盒子模型由四部分组成margin.border.padding.content. 怎么区别这两种模型呢,区别在于w3c中的width ...

  3. CSS三种布局模型是什么？

    在网页中,元素有三种布局模型:流动模型(Flow) 默认的.浮动模型 (Float).层模型(Layer).下面我们来看一下这三种布局模型. 三种布局模型介绍: 1.流动模型(Flow) 流动(Flo ...

  4. Android开发之基本控件和详解四种布局方式

    Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...

  5. CSS补充之--页面布局、js补充，dom补充

    CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...

  6. css多栏自适应布局

    css多栏自适应布局还是需要总结一下的,都是基本功. 一般使用position属性布局,或者用float属性布局,也可以使用display属性. 看资料说position适合首页布局,因为首页内容往往 ...

  7. HTML CSS + DIV实现整体布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  8. HTML CSS + DIV实现局部布局

    HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...

  9. css 多栏自适应布局

    在页面重构中,我们经常会需要实现多栏布局,例如n栏固定宽度 + m栏自适应宽度的组合,绝对布局+padding+百分比宽度是容易想到的比较暴力的解决方法,但是作为未来的"工程师", ...

  10. 前端总结·基础篇·CSS（一）布局

    目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...

随机推荐

  1. SSIS ->> Environment Variables

    SQL Server Integration Services(SSIS) 在2012版本引入了Environment Variables这个新特性.它允许我们为一个环境创建出一套变量用于为项目内的包 ...

  2. Leetcode- Find Minimum in Rotated Sorted Array-ZZ

    http://changhaz.wordpress.com/2014/10/15/leetcode-find-minimum-in-rotated-sorted-array/ Suppose a so ...

  3. 数据库聚焦与非聚焦索引 事务处理 redis innodb引擎(九)

    1 数据库事务处理 一个数据库事务通常包含对数据库进行读或写的一个操作序列 . 当一个事务被提交给了DBMS(数据库管理系统),则DBMS需要确保该事务中的所有操作都成功完成且其结果被永久保存在数据库 ...

  4. <!--注释-->和<%--注释--%>有什么区别

    转载:版权所有:基础软件.作者邮箱:s.j.l.studio@hotmail.com,sun.j.l.studio@gmail.com.本文首发于 http://www.cnblogs.com/Fou ...

  5. 你是怎么调试 JavaScript 程序

    你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用 ...

  6. 039条件变量同步(Condition)

    也是锁,这个锁多加了wait(),notify()唤醒一个进程,notifyall()唤醒全部进程方法,创建的时候默认是Rlock类型的锁,可以设置为lock类型的,默认就ok from random ...

  7. 【转载】CodeIgniter与PHP5.6的兼容问题

    错误提示: A PHP Error was encountered Severity: Notice Message: Only variable references should be retur ...

  8. [原]零基础学习视频解码之安装ffmpeg

    写在文章前面:ffmpeg是一个开源的编解码框架,拥有很强大的功能.但是对于如果使用其来做开发呈现着严重两极分化,大神们讨论着高深的问题,大多数像我这样的小白连门都进不去.最近无意间领会了如何入门,现 ...

  9. nefu 628 Garden visiting

    //yy:想到昨天一个神题整了几个小时,最后按题解把p拆了用孙子定理..今天这个简单,把C暴力拆了.. 题目链接:nefu 628 Garden visiting 1 <= n, m, p &l ...

  10. BZOJ3033:太鼓达人(DFS,欧拉图)

    Description 七夕祭上,Vani牵着cl的手,在明亮的灯光和欢乐的气氛中愉快地穿行.这时,在前面忽然出现了一台太鼓达人机台,而在机台前坐着的是刚刚被精英队伍成员XLk.Poet_shy和ly ...