第一种  两栏式布局

 <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. sharePoint查看与更改用户登录账号

    PS D:\deployScript> $user=(Get-SPUser -IDENTITY "i:0e.t|xmssts|zhangshan" -Web http://t ...

  2. How to alter department in PMS system

    question:How to alter department in PMS system 1.Use  generally method modified department: update e ...

  3. 7za 命令解析

    转载自:blog.chinaunix.net/uid-26330274-id-3055157.html 7za 命令讲的很详细,收藏下来. 命令行压缩解压一 7z   1) 简介 7z,全称7-Zip ...

  4. 设计模式：桥接（Bridge）模式

    设计模式:桥接(Bridge)模式 一.前言   写到这里,基本上就是对前面几种模式的扩展和区别了,可以看到我们前面的几种模式,很多时候都出现了重叠,这里要分清一个概念,模式并不是完全隔离和独立的,有 ...

  5. ZT 3.1 依赖倒置原则的定义

    设计模式精解-GoF 23 种设计模式解析附 C++实现源码http://www.mscenter.edu.cn/blog/k_eckelP58 Template 模式获得一种反向控制结构效果,这也是 ...

  6. 牛客网多校训练第三场 C - Shuffle Cards（Splay / rope）

    链接: https://www.nowcoder.com/acm/contest/141/C 题意: 给出一个n个元素的序列(1,2,...,n)和m个操作(1≤n,m≤1e5),每个操作给出两个数p ...

  7. thrift C++ Centos 安装

    1.在官方下载thrift http://thrift.apache.org/download 这里下载thrift-0.11.0.tar.gz版本 2.如果想支持安装Cpp版本就需要先安装boost ...

  8. Libevent源码学习笔记一：event2/event.h

    一.libevent标准使用方法: 每个程序使用Libevent必须include <event2/event.h> 头文件,并 传给 -levent  链接器.如果只是想使用主要的eve ...

  9. jquery ajax 标准写法

    $.ajax({ url:"http://www.microsoft.com", //请求的url地址 dataType:"json", //返回格式为json ...

  10. 转：git 的常用命令

    转自:阮一峰 常用git命令清单 一般来说,日常使用只要记住下图6个命令,就可以了.但是熟练使用,恐怕要记住60-100个命令. 下面是我整理的常用 Git 命令清单.几个专用名词的译名如下. Wor ...