我在将文本 block 内的相关链接 div 左对齐时遇到问题，距离内容区域顶部恰好 250 像素，同时保留自动换行。我尝试使用绝对定位来做到这一点，但内容区域中的文本并未环绕内容。
我只想修复内容中的相关链接 div，但是，这将显示在文章页面上，因此我希望在不将其放置在内容中的特定位置的情况下完成此操作。
这可能吗？如果是这样，有人可以帮我解决这个 CSS 问题吗？
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>
最佳答案
更新2:
说得太快了。 browsershots.org 显示它在 Opera 5(我使用的是早期版本)和某些版本的 Safari，以及(当然)IE7 及以下版本(IE8 可以)上运行。
更新:
以下代码根据 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>
请注意，侧边栏旁边及其下方的 float 句柄正确(在 IE6 中所有选项均关闭)。
但边栏上方的文本的左边距是错误的——不包括第一段。
第一段出现在 html 代码的边栏之前。不仅如此，它还使侧边栏向下倾斜——不再是 250 像素。
我很确定我可以使用 javascript 来解决这个问题——在页面加载后——但我不推荐这种方法。
关于html - 使用包装内容修复距内容顶部 250px 的框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3008846/