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>

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

  1. [转]div内容底部对齐

    本文转自:http://blog.csdn.net/hellomy/article/details/5889833 <html> <head> <meta http-eq ...

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

    最近在用wordpress写页面时,设计师给出了一种网页排布图样,之前从未遇到过,其在电脑上(分辨率大于768px)的效果图如下: 而在手机(分辨率小于等于768px)上要求这样排列: 我想到了两种方 ...

  3. CSS多种方式实现底部对齐

    CSS实现底部对齐效果 因公司业务要求需要实现如下图中红色区域的效果: 效果说明: 1.红色区域数据需要倒排(即从底部开始数,数字为1.2.3.4.5),并且显示在最底部 2.当数据过多时需要显示滚动 ...

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

    从WP转IOS了,还是放不下...... 在项目中,要实现如图多个不同大小的文字   底部对齐的效果   像下面这样: (想要的效果) 以为用三个UIFont不同的UILabel  之后让他们底部对齐 ...

  5. 解决：并排的两个div底部对齐

    我希望在页面上画2个栈,并列起来,并且其内容是动态的,高度.宽度都可变,但是要保持底部对齐,如图: 实现的代码如下: <html> <head> <meta http-e ...

  6. CSS 布局 - 水平 & 垂直对齐

    CSS 布局 - 水平 & 垂直对齐 一.元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;. 设置到元素的宽度将防止它溢出到容器的边缘 ...

  7. CSS：CSS 布局 - 水平 & 垂直对齐

    ylbtech-CSS:CSS 布局 - 水平 & 垂直对齐 1.返回顶部 1. CSS 布局 - 水平 & 垂直对齐 水平 & 垂直居中对齐 元素居中对齐 要水平居中对齐一个 ...

  8. div+css页面右侧底部悬浮层

    效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...

  9. 如何让图片在垂直方向与 div的底部对齐 水平居中

    需要图片的绝对定位postion: absolute. 一般定位时, 是用div去定位. 一般不直接用 非div去"绝对/相对"定位. 如不直接用 等去定位. 因为这些好像不好定位 ...

随机推荐

  1. ArrayList循环遍历并删除元素的几种情况

    如下代码,想要循环删除列表中的元素b,该怎么处理? public class ListDemo { public static void main(String[] args) { ArrayList ...

  2. 重写Sink合并多行

    flume1.6+elasticsearch6.3.2 Pom <dependencies> <dependency> <groupId>junit</gro ...

  3. 《转载》最新鲜最详细的Android SDK下载安装及配置教程

    Android开发环境搭建可以分: 第一步.安装JDK: 第二步.安装Eclipse: 第三步.下载并安装AndroidSDK:   下面详细介绍. 第一步.安装JDK Android开发工具要求必须 ...

  4. bzoj 2002 : [Hnoi2010]Bounce 弹飞绵羊 （LCT)

    链接:https://www.lydsy.com/JudgeOnline/problem.php?id=2002 题面: 2002: [Hnoi2010]Bounce 弹飞绵羊 Time Limit: ...

  5. PHP 面向切面编程

    面向切面编程介绍: 介绍: AOP(Aspect-Oriented Programming,面向方面编程),可以说是OOP(Object-Oriented Programing,面向对象编程)的补充和 ...

  6. django rest framework authentication

    身份验证 身份验证是将传入请求与一组识别凭证(例如请求的用户或其签名的令牌)相关联的机制.然后,权限和限制策略可以使用这些凭据来确定请求是否应该被允许. REST framework 提供了许多开箱即 ...

  7. nginx日志格式定义和nginx.conf配置模板说明

    在http的功能里添加log_format模块,内容如下: log_format main escape=json '{ "@timestamp": "$time_iso ...

  8. apue——无缓冲读写操作

    stdrw.c文件 #include "apue.h" #define BUFFSIZE 4096 #include <stdio.h> int main(int ar ...

  9. flask websocker

    WebSocket 是一种网络通信协议.RFC6455 定义了它的通信标准. HTTP 协议是一种无状态的.无连接的.单向的应用层协议.它采用了请求/响应模型.通信请求只能由客户端发起,服务端对请求做 ...

  10. SpringMVC生命周期，SpringMVC运行流流程

    SpringMVC详细运行流程图 SpringMVC运行原理 1. 客户端请求提交到DispatcherServlet2. 由DispatcherServlet控制器查询一个或多个HandlerMap ...