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. Linux centos ssh

    创建m01.backup.nfs.web01.web02 m01(172.16.1.61).backup(172.16.1.41).nfs(172.16.1.31).web01(172.16.1.7) ...

  2. Python——模块——配置模块（ConfigParser）

    一.读取 read(filename) 直接读取ini文件内容  sections() 得到所有的section,并以列表的形式返回 options(section) 得到该section的所有opt ...

  3. Netty 客户端断线重连

    client 关闭后会执行 finally 代码块,可以在这里可以进行重连操作 public class NettyClient implements Runnable { private final ...

  4. Java 学习（1）----- java 学习的总体感觉

    好久没有更新博客了,是因为最近在集中精力学习java, Java 的基础知识确实是比 js 多太多了. 学习java 断断续续的差不多有一年左右的时间, 这一年来,感觉懂了一点,过一段时间又忘记了,总 ...

  5. Vue应用请求SpringBoot API出现 CORS 跨域请求设置 Invalid CORS request错误

    1.全局配置 在application.java文件添加CorsRegistry配置 package com.ypnh.authority; import com.ypnh.authority.inf ...

  6. Oracle 给予访问其他用户包的权限

    grant execute on apps.SPM_CON_INVOICE_INF_PKG to diq; grant  DEBUG on apps.SPM_CON_INVOICE_INF_PKG t ...

  7. LUYA-CDM

    下载链接:https://pan.baidu.com/s/11Lq3IWcAcAs9gYbq4mYm1Q 密码:n1kz

  8. Linux keepalived工作原理

    keepalived简介与工作原理 Keepalived的作用是检测服务器的状态,如果有一台web服务器宕机,或工作出现故障,Keepalived将检测到,并将有故障的服务器从系统中剔除,同时使用其他 ...

  9. ReactNative开发笔记（持续更新...）

    本文均为RN开发过程中遇到的问题.坑点的分析及解决方案,各问题点之间无关联,希望能帮助读者少走弯路,持续更新中... (2019年3月29日更新) 原文链接:http://www.kovli.com/ ...

  10. antd Tree组件中，自定义右键菜单

    最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component { state = { rightClickNodeTree ...