盒子模型（悬挂式布局）

早期的图文混排，直接浮动

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}img{width: 100px;height: 100px;float: left;}p{background: #ccc;}</style></head><body><section><img src="img/1.jpg" alt=""/><p>我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国我爱中国</p></section></body>
</html>

自己适配图片和文字位置。

图片单独一行，上下位置可以控制。

<style type="text/css">*{margin: 0;padding: 0;}img{width: 100px;height: 100px;float: left;align-self: flex-end;}p{background: #ccc;}section{display: flex;}
</style>

如何制作？

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0px;padding: 0px;box-sizing: border-box;}section{width: 200px;height: 400px;background: #ccc;margin: 100px auto;display: flex;flex-wrap: wrap;align-content: flex-start;}div{width: 25%;height: 50px;border: 1px solid red;}</style></head><body><section><div ></div><div ></div><div ></div><div ></div><div ></div><div ></div><div ></div><div ></div><div ></div><div ></div><div ></div><div ></div></section></body>
</html>

注意：flex-shrink：0 一行不在进行压缩：

列如：

盒子模型（悬挂式布局）相关推荐

04-前端技术_盒子模型与页面布局
目录三,盒子模型与页面布局 1,网页布局介绍 1.1 固定布局 1.2 流式布局(Liquid Layout) 1.3 栅格化布局 1.4 自适应布局(Adaptive Layout) 1.5 响应 ...
【CSS基础】盒子模型、浮动布局、ps切图、定位及一些零碎知识点
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍CSS基础知识,包括盒子模型.浮动布局.PS切图.定位.元素的显示与隐藏和一些零碎知识点思维导图 ...
CSS盒子模型与页面布局
202209 week1 day5~day6 前端学习 1 盒子模型 1.1 盒子模型结构 1.1.1 内容 1.1.2 边界(margin) 1.1.3填充(padding) 1.1.4 边框(bo ...
初识HTML（五）进阶：CSS盒子模型、页面布局
目录 CSS 盒子模型(Box Model) 页面布局浮动流制作导航栏如何页面布局定位流 relative相对定位 absolute绝对定位 fixed固定定位 CSS 盒子模型(Box Mo ...
【前端基础】盒子模型和页面布局总结
一.盒子模型 1.盒模型概念在模型中,规定了元素内容.内边距.边框和外边框最内是内容,包围内容的是内边距,内边距的边缘是边框边框以外是外边距,外边距默认是透明的 2.边框 1.1.边框borde ...
弹性盒模型响应式布局
1.移动端布局与PC端的区别 PC端最常用的布局是固定宽度(980px,960px,1000px,1200px);移动端网页是可以横屏看也可以竖屏看,屏幕的分辨率不同,固定宽度的布局必然是不可行的. ...
CSS之弹性盒子模型（Flex布局）
文章目录一.Flex布局是什么? 二.基本概念三.容器的属性 3.1 flex-direction属性 3.2 justify-content属性 3.3 flex-wrap属性 3.4 alig ...
html悬挂式布局,挂横幅用什么可以固定以两边挂绳的上边距离为准悬挂
犇众矩阵文化传媒犇众传媒项目执行教程--横幅悬挂制作人:林万胜横幅的一般组成部分文字扎线带竹竿条幅布.横幅布安装流程首先把A.B.C.D都与固定的绳子或铁丝固定,固定后可用扎线带二次固定. 把A端的 ...
CSS选择器、盒子模型及布局
一.CSS的简介 Cascading Style Sheets:层叠样式表可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能. 将网页内容和显示样式进行了 ...

盒子模型（悬挂式布局）

盒子模型（悬挂式布局）相关推荐

最新文章

热门文章