页面布局常用,让子级div排排坐
画页面的时候经常遇到页面布局的问题,父级div包裹多个子div很常见,代码如下:
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="father">
<div class="child all">1</div>
<div class="child all">2</div>
<div class="child all">3</div>
</div>
</body>
但是效果如下:
如果我想让多个子div横着排排坐,加 float:left 这个是个办法。效果如下:
为什么加float浮动会有效果,因为float 属性定义的元素如果没有指定一个明确的宽度,他们会尽可能地窄。
另一种办法是,给父级div加 display:table,然后给子div加 display:table-cell; 示例如下:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father {
display: table;
}
.child {
display: table-cell;
background: green;
} </style>
</head>
<body>
<div class="father">
<div class="child all">1</div>
<div class="child all">2</div>
<div class="child all">3</div>
</div>
</body>
页面布局常用,让子级div排排坐的更多相关文章
- python:页面布局 后台管理页面之常用布局
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- html div+css做页面布局
http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒 ...
- 01 DIV+CSS 固定页面布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是 ...
- css书写规范 & 页面布局规范 &常用案例经验总结
CSS 属性书写顺序(重点) 建议遵循以下顺序: 布局定位属性:display / position / float / clear / visibility / overflow(建议 displa ...
- DIV页面布局,开局代码
DIV页面布局,开局代码 主要是style部分和body部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
- CSS入门指南-4:页面布局
这是<CSS设计指南>的读书笔记,用于加深学习效果. display 属性 display是 CSS 中最重要的用于控制布局的属性.每个元素都有一个默认的 display 值.对于大多数元 ...
- CSS3与页面布局学习总结(四)——页面布局大全
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法
一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...
- CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
随机推荐
- Spring4新的javaConfig注解
1.@RestController spring4为了更方便的支持restfull应用的开发,新增了RestController的注解,比Controller注解多的功能就是给底下的RequestMa ...
- JAVA之数组队列
package xxj.datastructure0810; import java.util.Random; public class DataStructure { /** * @param ar ...
- [Python Study Notes]csv文件操作
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...
- Python单例模式剖析
在聊这之前我们首先要明确的是,单例模式在实际中的意义以及在python中具有实现的价值? 当前,相信有很多人支持单例模式,也有不少人反对,尤其是在python中,目前依旧具有很大的争议性.我们要在评论 ...
- git pull没有指定branch的报错
执行git pull或者git push的时,有时候会出现如下报错: $ git pull You asked me to pull without telling me which branch y ...
- c++11: thread_local
thread_local变量是C++ 11新引入的一种存储类型.它会影响变量的存储周期(Storage duration),C++中有4种存储周期: automatic static dynamic ...
- [cerc2017J]Justified Jungle
题目大意:删去k条边,树变为相等个点的连通分量,求所有正整数k. 解题关键:树dp,不必求因子. #include<bits/stdc++.h> using namespace std; ...
- linux中创建图片服务器减轻传统服务器的压力
1.1. 传统项目中的图片管理 传统项目中,可以在web项目中添加一个文件夹,来存放上传的图片.例如在工程的根目录WebRoot下创建一个images文件夹.把图片存放在此文件夹中就可以直接使用在 ...
- #pragma pack()用法详解
博客转载自:http://blog.csdn.net/lime1991/article/details/44536343 1.什么是对齐?为什么要对齐? 现代计算机中内存空间都是按照byte划分的,从 ...
- ssh远程执行命令使用明文密码
经过不懈的搜索终于找到ssh远程执行命令使用明文密码使用sshpass. 例子: sshpass -p "sequoiadb" ssh root@localhost "l ...