一种后遗症比较多的多列自动对齐

在执行同一容器里的两列或者多列,不定高自动对齐的时候,最好的办法是使用JS。

下边这个方法虽然没使用JS完成了,但是后遗症比较多,不推荐使用。

仅仅是明白就好了。偶尔在不复杂的页面里可以用用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

<!--

body {

background-color: #fff;

height:100%;

font-size:12px;

text-align:center;

}

html{height:100%;}

.box{height:100%; background:#f9f9f9; width:450px; float:left; padding-left:50px;}

.box2{float:left; background:#ff9900; width:400px;height:auto; overflow:hidden;}

.left{width:190px; background:#ff6600; float:left; margin-right:10px;height:auto; padding-bottom:10000px !important; margin-bottom: -10000px !important;}

.right{width:200px; background:#ff6600; float:left;height:auto; padding-bottom: 10000px !important; margin-bottom: -10000px !important; }

-->

</style></head>

<body>

<div class="box">

<div class="box2">

<div class="left">

<p>1111</p>

<p>1111</p>

<p>1111</p>

<p>1111</p>

<p>1111</p>

<p>1111</p>

</div>

<div class="right">我自动跟右边对齐</div>

</div>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小狼的世界

如何生成eot字体

前一段时间听闻Google退出ubuntu字体的时候,使用了一下,从而了解到 font-face 的用法:

982
来自专栏文渊之博

部署和使用kibana

背景 本文将主要介绍ELK的可视化工具Kibana的部署和使用。主要分为三个步骤来实现最终呈现:   1.导入数据到ES;   2.部署kiban...

22510
来自专栏无原型不设计

Mockplus原型交互跟我做之6 - 快速给弹出面板命名

到这里,我们插入一个有用小技巧的介绍。 在交互设计中,我们经常需要给弹出面板起一个名字,便于查看。 一般的方式,是在属性面板中,通过“名称”来修改。 但...

2524
来自专栏AI派

【极限操作】一行Python代码生成一个二维码

二维码在当今社会是一个很常见的功能,如何使用 Python 来生成二维码呢?这里我们借助 qrcode 工具来生成我们需要的二维码。

801
来自专栏Python、Flask、Django

hyper网络连接配置(之一)

1005
来自专栏Hadoop实操

如何为Hue添加自定义Banner

在用户使用Hue时,如果需要在Hue界面设置一些提示等信息(如:“Hue用户申请及权限放通,请联系xxx”)时。那这是我们可以通过配置在Hue界面添加该提示信息...

1233
来自专栏Python疯子

python的画图功能--柱形图

安装pyecharts库; pip install pyecharts 安装完成后,我们先制作一个简单的柱形图;

752
来自专栏企鹅号快讯

Bootstrap项目实训干货:设计带修改和删除的图书表格

# 一、实验目标 写一个带修改和删除的表格。页面如下: ? # 二、环境依赖 采用bootstrap框架来实现,依赖的版本为3.3.7。 我们可以直接引用cdn...

1745
来自专栏小文博客

WordPress简约清新文艺主题——Variant

1771
来自专栏前端小叙

vue报错集锦

1、vue报错: 没安装 less-loader css-loader style-loader        可能的很大原因:没安装less 2、vuex报错...

4306

扫码关注云+社区