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

在执行同一容器里的两列或者多列,不定高自动对齐的时候,最好的办法是使用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 条评论
登录 后参与评论

相关文章

来自专栏DannyHoo的专栏

父视图半透明而子视图不半透明

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

682
来自专栏后端之路

js捕获404错误

最近使用fundebug,发现fundebug升级到了0.1.0,支持了 Fundebug的JavaScript监控插件更新至0.1.0,可以监控3种不同类型的...

3317
来自专栏小狼的世界

Vimperator:玩酷你的Firefox

First there was a Navigator, then there was an Explorer. Later it was time for a...

944
来自专栏张戈的专栏

你知道Windows和WordPress上帝模式吗?

一、Windows 上帝模式 这个玩意出来很久很久了,估计不用多说,知道的同学还是挺多的,不知道的也只要百度一下,你就知道了。 方法很简单,在 Windows ...

3336
来自专栏我是攻城师

IntelliJ IDEA的光芒会盖过Eclipse吗

3415
来自专栏张戈的专栏

PHP7.0正式版编译安装升级及WordPress问题解决分享

盼望以久的 PHP 7.0 正式版,终于在今天发布了! ? 官方给出的新特性如下: PHP 7.0.0 comes with new version of th...

3787
来自专栏石奈子的Java之路

原 Intellij IDEA 2017

2226
来自专栏运维小白

linux基础快捷键

Linux快捷键使用: ctrl+l:清屏 ctrl+d: 退出终端;或者输入命令瑞出,exit 或者 logout(在行内有字符的情况下是向后删) ctrl...

2636
来自专栏cloudskyme

如何插入或 Visio 中粘贴的 Excel 工作表

嵌入或链接 Excel 工作表通过对象命令在插入菜单上的绘图在 Visio loadTOCNode(2, 'summary'); 使用 插入 菜单上 对象 命...

3187
来自专栏非著名程序员

AndroidTShare Weekly No.11

本期热点开源项目 FreshDownloadView 一个下载动画,下载完成和失败的时候会有酷酷的动画,非常炫酷和使用。 效果图如下: ? 作者:dudu90 ...

1808

扫码关注云+社区