左右两半布局 | CSS-Tricks

<!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>Some Example from CSS-Tricks</title>
	
	<style type="text/css">
	   
	   * { margin: 0; padding: 0; }
	   p { padding: 10px; }
	   #left { position: absolute; left: 0; top: 0; width: 50%; }
	   #right { position: absolute; right: 0; top: 0; width: 50%; }
	
	</style>
</head>

<body>

    <div id="left">
        <p>Left Half</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </div>

    <div id="right">
        <p>Right Half</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </div>

</body>

</html>

Sunny Singh

# 2009年10月23日

最好使用浮动，但我认为这种技术有相同的效果。不过，最好与相对定位的包装器一起使用。

Brian

# 2010年2月23日

确实，如果你需要在父 div 内创建两列，请确保将父 div 设置为“position:relative;” 以便正确包含绝对定位的子元素。

示例

#pagewrap {width:100%; position:relative;}
#left { position: absolute; left: 0; top: 0; width: 50%; }
#right { position: absolute; right: 0; top: 0; width: 50%; }

Dor

# 2010年2月27日

在这种情况下，浮动更好。我通常尽量避免使用 position: absolute;，尤其是在关键布局组件上。

jeff sturgis

# 2010年11月15日

浮动也有其问题，并导致需要额外的浮动清除 CSS。

Daniel Veiga

# 2011年2月10日

@Jeff

我更愿意在 CSS 中使用额外的规则来清除浮动，而不是使用绝对定位 - 有时它可能有点混乱。

Rajinder Sandhu

# 2011年8月3日

最好使用浮动来进行布局划分。此外，除了使用 * 重置 HTML 元素的样式外，我建议对组中的各个元素使用重置。

Der

# 2012年3月10日

为什么费这么大的劲，直接用表格就行了，不用乱七八糟的。

Julian Cizmic

评论永久链接# 2012年5月4日

你还在停留在 1995 年吗？;)
gann

评论永久链接# 2013年5月20日

我同意，仅仅因为出现了一些新方法，并不意味着你必须使用它们。

例如，bgColor=gray，尽管 dep'd 永远不会消失，因为基本浏览器始终需要它们。

Hallucinogenizer

# 2014年9月25日

这是一个新的解决方案，尽管可以通过表格轻松实现。

Trying Left and Right Halves

table {
    width:100%;
}
td {
    width:50%;
    overflow:visible;
    vertical-align:top;
}






<!-- Left half -->
Something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something.
<!-- Right half -->
While  something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something.

尽管如此，这是一种新的做事方法。你永远不知道在什么地方发现它有用以及如何使用它。

tim

# 2014年10月17日

让我们将 Flex Box 加入比赛。它可以轻松处理这个问题，不需要清除，不需要绝对定位。

Joah

# 2015年11月15日

为什么不使用“display: inline-block”，然后将宽度设置为 50% 呢？更方便。

Chris Coyier

评论永久链接# 2015年11月16日
如果两个元素之间有任何空格，它们将换行，这是一个非常脆弱的事情。

如今，我可能会这样做…
```
.halfs {
  display: flex;
}
.half { /* child of .halfs */
  width: 50%;
}
```

James Brooks

# 2015年12月15日

同意 Chris 上面的说法，请查看 https://codepen.io/anon/pen/addNyK

评论

发表评论 取消回复

发表评论取消回复