CSS 左右两边底部对齐

https://demo.cssworld.cn/4/3-2.php

<style type="text/css">
.parent{
width:500px;
text-align: center;
overflow: hidden;
}
.son{
float: left;
width: 250px;
margin-bottom:-99999px;
padding-bottom: 99999px;
}
.son:nth-child(1){
background: #7FFFD4;
}
.son:nth-child(2){
background: #CD5C5C;
}
span{
display: block;
}
</style>
<body>

<div class="parent">
<div class="son">
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>

</div>
<div class="son">
<span>1</span>
<span>1</span>
<span>1</span>
</div>
</div>

</body>

原文地址:https://www.cnblogs.com/chengfengchi/p/10658493.html

时间: 2024-10-21 00:52:16

CSS 左右两边底部对齐的相关文章

在div中使用css让文字底部对齐的方法

css对文字的布局上没有靠容器底部对齐的参数,不过我们可以使用position的相对和绝对定位功能轻松实现文字靠近div底部对齐,并且靠近的距离可以调节,精确到像素,在网上搜集到三段代码如下.由www.169it.com 搜集整理 代码1: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <!DOCTYPE HTML PUBLIC   "-//W3C//DTD HTML 4.01 Transit

CSS布局之div交叉排布与底部对齐--flex实现

最近在用wordpress写页面时,设计师给出了一种网页排布图样,之前从未遇到过,其在电脑上(分辨率大于768px)的效果图如下: 而在手机(分辨率小于等于768px)上要求这样排列: 我想到了两种方法 第一种是用bootstrap的row.col-md配合col-md-push.col-md-pull来实现,代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8">

box-align,box-pack实现元素垂直底部对齐

自己写了一个图表样式,利用box-align,box-pack属性end实现了其内部元素垂直底部对齐,在利用该属性前,设置其display属性为box即可. css代码: .tubiao-content{width: 90%;margin: auto;} .tubiao{border-bottom: solid 1px #d0cece; padding-top: 2.4rem;} .time01 { position: relative; float: left; margin-left:12%

水平列表的底部对齐方式的探讨(1、用inline-block+vertical-align 2、用table-cell+vetical-align 3、用flex方式)

实现水平列表的底部对齐有许多种方式: 1.用inline-block+vertical-align 2.用table-cell+vetical-align 3.用flex方式 此外,还可以用变形.绝对定位方式,但是用变形和绝对定位方式太过于复杂. 这里还是只介绍前三种方式,其中前两种的唯一区别就是第二种用了display:table-cell. HTML代码部分: <body> <div class="parent"> <div id="chil

【IOS】将字体大小不同的文字底部对齐

从WP转IOS了,还是放不下...... 在项目中,要实现如图多个不同大小的文字   底部对齐的效果   像下面这样: (想要的效果) 以为用三个UIFont不同的UILabel  之后让他们底部对齐就可以了,但是效果是下面这样的:  (不想要的效果) 底部完全不对齐呀,为什么"1314"比两边高出了那么多呀!!!!强迫症不能忍呀!!! ---------------------------------------------------------------------------

CSS 布局 - 水平 &amp; 垂直对齐的集中方法案例解析

CSS 布局 - 水平 & 垂直对齐 水平 & 垂直居中对齐 元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;. 设置到元素的宽度将防止它溢出到容器的边缘. 元素通过指定宽度,并将两边的空外边距平均分配: div 元素是居中的 实例 .center{margin:auto; width:50%; border:3pxsolidgreen; padding:10px; } 注意: 如果没有设置 width 属性(或者设置 100%),

html css 仿微信底部自定义菜单

最近几个月一直从事微信开发,从刚开始的懵懂渐渐成长了一点.今天觉得微信底部自定义菜单,如果能在html的页面上也能显示就好了. 记得以前看过某个网页有类似效果.查找了该网页的css.  ok现在html css 实现微信自定义菜单效果. 不多说直接上代码. /** * 仿微信自定义菜单 * * @author xuyw * @email [email protected] * @date 2014-07-27 */ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HT

jQuery&amp;CSS 顶部和底部固定浮动工具栏 兼容IE6

现在常常能看到一些网站(如:新浪微博和花瓣)导航条或工具栏固定在网页的顶部或其他地方.这样的布局方式,能便于用户点击和“曝光率”,不用每次都要把网页拖动到某个特定位置才能点击或看到. 其实这样的布局方式很早就有,只是没有那么个契机推广开吧.做起来也不复杂,只要设置一个小小的属性“position:fixed”便能完成,最关键的无不呼在于要兼容IE6而已. 首先我们来看HTML代码,是不是超简单?这里提供的只是一个简单的框架,实际应用的时候,只要把想要的元素添加东西就在这区域内加就行. HTML

DIV+CSS实现两边固定宽度,中间自适应宽度

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>DIV+CSS实现两边固定宽度,中间自适应宽度</title> <style type="text/css"> .left, .right{ width: 100px; height: 100px; background-colo