我无法在文本块内对齐相关链接div，距离内容区域顶部恰好250像素，同时保留自动换行。我尝试使用绝对定位来执行此操作，但内容区域中的文本不会包含内容。
我只会在内容中修复相关的链接div，但是，这会显示在文章页面上，所以我希望在不将其放在内容的特定位置的情况下完成。
这可能吗？如果是这样，有人可以帮我解决这个问题吗？
Example image of desired look & feel...
更新：为简单起见，我添加了示例代码。您可以在此处查看：http://www.focusontheclouds.com/files/example.html。
示例HTML：
<!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>
<title>Example Page</title>
<style>
body {
width: 400px;
font-family: Arial, sans-serif;
}
h1 {
font-family: Georgia, serif;
font-weight: normal;
}
.relatedLinks {
position: relative;
width: 150px;
text-align: center;
background: #f00;
height: 300px;
float: left;
margin: 0 10px 10px 0;
}
</style>
</head>
<body>
<div class="relatedLinks"><h1>Related Links</h1></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus est luctus ante auctor et ullamcorper metus ullamcorper. Vestibulum molestie, lectus sed luctus egestas, dolor ipsum aliquet orci, ac bibendum quam elit blandit nulla.</p>
<p>In sit amet sagittis urna. In fermentum enim et lectus consequat a congue elit porta. Pellentesque nisl quam, elementum vitae elementum et, facilisis quis velit. Nam odio neque, viverra in consectetur at, mollis eu mi. Etiam tempor odio vitae ligula ultrices mollis. </p>
<p>Donec eget ligula id augue pulvinar lobortis. Mauris tincidunt suscipit felis, eget eleifend lectus molestie in. Donec et massa arcu. Aenean eleifend nulla at odio adipiscing quis interdum arcu dictum. Fusce tellus dolor, tempor ut blandit a, dapibus ac ante. Nulla eget ligula at turpis consequat accumsan egestas nec purus. Nullam sit amet turpis ac lacus tincidunt hendrerit. Nulla iaculis mauris sed enim ornare molestie. </p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas non purus diam. Suspendisse iaculis tincidunt tempor. Suspendisse ut pretium lectus. Maecenas id est dui.</p>
<p>Nunc pretium ipsum id libero rhoncus varius. Duis imperdiet elit ut turpis porta pharetra. Nulla vel dui vitae ipsum sollicitudin varius. Duis sagittis elit felis, quis interdum odio. </p>
<p>Morbi imperdiet volutpat sodales. Aenean non euismod est. Cras ultricies felis non tortor congue ultrices. Proin quis enim arcu. Cras mattis sagittis erat, elementum bibendum ipsum imperdiet eu. Morbi fringilla ullamcorper elementum. Vestibulum semper dui non elit luctus quis accumsan ante scelerisque.</p>
</body>
</html>
答案 0 :(得分：2)
说得太快了。 browsershots.org显示它在Opera 5（我使用的是早期版本）和一些版本的Safari，以及（当然）IE7及以下（IE8可以）的barfs。
以下代码，从Dan M的答案中无耻地调整，似乎适用于现代浏览器。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Nice Sidebar Box</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.wrapper
{
width: 500px;
margin: 0 30px;
line-height: 1.5;
padding-top: 250px;
}
.content
{
margin: 0;
margin-top: -250px;
}
.relatedLinks
{
height: 300px;
width: 240px;
margin: 0 1em;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="relatedLinks">
Related links content here...
</div>
<div class="content">
<p>
Do not argue with a spouse who is packing your parachute.
</p>
<p>
Three weeks ago, she learned how to drive. Last week she learned how to aim it.
</p>
<p>
How, if they can't see their reflections, do vampires always get their hair so nice?
</p>
<p>
My wife will buy anything marked down. Last year she bought an escalator.
</p>
<p>
Sign in a men's room: "This is not urinal, it's ourinal, so please flush."
</p>
<p>
She was at the beauty shop for two hours. That was only for the estimate.
</p>
<p>
For those of you who've never been to Las Vegas, there the "G string" is known as the gownless
evening strap.
</p>
<p>
Hollywood's a town where they shoot entirely too many movies and not enough actors.
</p>
<p>
Three weeks ago, she learned how to drive. Last week she learned how to aim it.
</p>
<p>
How, if they can't see their reflections, do vampires always get their hair so nice?
</p>
<p>
My wife will buy anything marked down. Last year she bought an escalator.
</p>
<p>
Sign in a men's room: "This is not urinal, it's ourinal, so please flush."
</p>
<p>
She was at the beauty shop for two hours. That was only for the estimate.
</p>
<p>
For those of you who've never been to Las Vegas, there the "G string" is known as the gownless
evening strap.
</p>
<p>
Hollywood's a town where they shoot entirely too many movies and not enough actors.
</p>
</div>
</div>
</body>
</html>
仅使用CSS可能无法实现。请考虑以下页面：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Nice Sidebar Box</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.content
{
width: 500px;
margin: 2em;
line-height: 1.5;
}
.relatedLinks
{
position: relative;
top: 250px;
height: 300px;
width: 240px;
margin: 1em;
background-color: red;
float: left;
margin-bottom: 250px;
display: inline-block;
}
</style>
</head>
<body>
<div class="content">
<p>
Do not argue with a spouse who is packing your parachute.
</p>
<div class="relatedLinks">
Related links content here...
</div>
<p>
Three weeks ago, she learned how to drive. Last week she learned how to aim it.
</p>
<p>
How, if they can't see their reflections, do vampires always get their hair so nice?
</p>
<p>
My wife will buy anything marked down. Last year she bought an escalator.
</p>
<p>
Sign in a men's room: "This is not urinal, it's ourinal, so please flush."
</p>
<p>
She was at the beauty shop for two hours. That was only for the estimate.
</p>
<p>
For those of you who've never been to Las Vegas, there the "G string" is known as the gownless
evening strap.
</p>
<p>
Hollywood's a town where they shoot entirely too many movies and not enough actors.
</p>
</div>
</body>
</html>
请注意，浮标在边栏旁边及其下方正确处理（所有投注在IE6中均已关闭）。
但是边栏上方的文字左边距是错误的 - 不计算第一段。
第一段在 html代码中的侧边栏之前出现。不仅如此，它还会使侧边栏瘫痪 - 它不再是250px。
我很确定我可以使用javascript来填充这个 - 在页面加载后 - 但我不推荐这种方法。
答案 1 :(得分：2)
我认为这不可能做到，虽然这是一个有趣的问题，试图解决，我很想被证明是错的。问题是，由于文本必须换行，链接必须是内联的，并且因为链接是内联的，所以我们无法真正控制它们周围的间距而不会影响文本。
话虽这么说，我确实提出了这个在Firefox中有效的黑客攻击（但在Chrome和IE中失败了）：
首先，将文章内容包装在div中。我的测试html看起来像这样：
<div class="wrapper">
<div class="relatedLinks">
<ul>
</li>Test link<li>
</li>Another link</li>
</ul>
<div>
<div class="content">
(Some really long text)
<div>
<div>
然后浮动链接并滥用一些边距/填充关系，如下所示：
.wrapper {
width: 300px;
padding-top: 200px;
}
.content {
margin-top: -200px;
}
.relatedLinks {
float: left;
}
.relatedLinks ul {
padding-right: 20px;
}
也许经过一些调整，它最终可以在其他浏览器中运行 - 但这将是一个非常麻烦的维护，遗憾的是我真的怀疑它是值得的。