Html 用包装内容从内容顶部固定一个250px的盒子_Html_Css_Browser

Html 用包装内容从内容顶部固定一个250px的盒子

html css browser

Html 用包装内容从内容顶部固定一个250px的盒子,html,css,browser,Html,Css,Browser,我很难在一块文本中对齐相关链接div，距离内容区域顶部正好250像素，同时保留换行。我尝试使用绝对定位来实现这一点，但内容区域中的文本没有环绕内容我只想修复内容中的相关链接div，但是，这将显示在文章页面上，因此我希望这样做，而无需将其放置在内容中的特定位置这可能吗？如果是这样的话，有人能帮我解决这个问题吗更新：为了简单起见，我添加了示例代码。您可以在此处查看： HTML示例：示例页身体{ 宽度：400px；字体系列：Arial，无衬线； } h1{ 字体系列：佐治亚，衬线；字

我很难在一块文本中对齐相关链接div，距离内容区域顶部正好250像素，同时保留换行。我尝试使用绝对定位来实现这一点，但内容区域中的文本没有环绕内容

我只想修复内容中的相关链接div，但是，这将显示在文章页面上，因此我希望这样做，而无需将其放置在内容中的特定位置

这可能吗？如果是这样的话，有人能帮我解决这个问题吗

更新：为了简单起见，我添加了示例代码。您可以在此处查看：

HTML示例：


示例页
身体{
宽度：400px；
字体系列：Arial，无衬线；
}
h1{
字体系列：佐治亚，衬线；
字体大小：正常；
}
.相关链接{
位置：相对位置；
宽度：150px；
文本对齐：居中；
背景：#f00；
高度：300px；
浮动：左；
利润率：0 10px 10px 0；
}
相关链接
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一位拍卖人和乌兰科佩尔·梅特斯·乌兰科佩尔。前庭胎记、耳垂、耳垂、耳垂、耳垂、耳垂
阿梅特·萨吉蒂·乌尔纳坐在那里。在酵母菌中，它是一种天然的精华。佩朗蒂斯克尼斯夸姆，生命元素等，面部表情。Nam odio neque，位于密苏里州莫利斯市康塞特图尔的维韦拉。暂时性软舌症
不要把舌头放在枕叶上。毛里斯·廷西蒙特·苏西比特·菲利斯，埃吉特·埃利弗德·莱克特斯·莫莱斯蒂。Donec et Masa arcu。在奥迪奥的教堂里有一座教堂，这是一座古老的建筑。这是一个很好的例子。turpis consequat accumsan egestas nec purus的无齿舌。这是一个很好的例子。未经许可的未经许可的未经许可的未经许可的未经许可的未经许可的未经许可的未经许可的未经许可的未经许可的未经许可的未经许可的未经许可的未经许可的未经许可的未经许可
在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。非purus直径。伊库利斯暂时性悬钩子。前悬韧带。我是酒后驾车
臀前肌群。杜伊斯·普雷特和图尔皮斯·普雷特拉之门。静脉曲张中的同侧静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张。两个是射手座的猫科动物，一个是中间人
莫比·帕特·索达莱斯。埃尼亚非尤伊斯莫德东部。猫科动物不侵权或不侵权。普罗因·奎斯·埃尼姆·阿库。箭矢状体，同侧元素。Morbi fringilla ullamcorper elementum。前庭半人半人半人半人半人半人半人半人半人半人半人半人半人半人半人半人半人半人半人半人半人半人半人半人半人半人半人半人半人半人半人半人半人半人半人半人半人

UPDATE2：我说得太快了。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>


漂亮的边栏框
.包装纸
{
宽度：500px；
利润率：0.30px；
线高：1.5；
填充顶部：250px；
}
.内容
{
保证金：0；
利润上限：-250px；
}
.相关链接
{
高度：300px；
宽度：240px；
边缘：0 1米；
背景色：红色；
浮动：左；
}
相关链接内容在这里。。。

不要与正在打包降落伞的配偶争吵。


三周前，她学会了开车。上周她学会了如何瞄准。


如果吸血鬼看不见自己的倒影，他们的头发怎么会这么漂亮呢？


我妻子会买任何降价的东西。去年她买了一部自动扶梯。


在男厕所里的牌子上写着：“这不是小便器，这是尿壶，所以请冲洗。”


她在美容院呆了两个小时。这只是估计。


对于那些从未去过拉斯维加斯的人来说，这里的“G弦”被称为无袍
晚装。


好莱坞是一个拍摄电影太多而演员太少的小镇。


三周前，她学会了开车。上周她学会了如何瞄准。


如果吸血鬼看不见自己的倒影，他们的头发怎么会这么漂亮呢？


我妻子会买任何降价的东西。去年她买了一部自动扶梯。


在男厕所里的牌子上写着：“这不是小便器，这是尿壶，所以请冲洗。”


她在美容院呆了两个小时。这只是估计。


对于那些从未去过拉斯维加斯的人来说，这里的“G弦”被称为无袍
晚装。


好莱坞是一个拍摄电影太多而演员太少的小镇。

旧答案：仅使用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>


漂亮的边栏框
.内容
{
宽度：500px；
边缘：2米；
线高：1.5；
}
.相关链接
{
位置：相对位置；
顶部：250px；
高度：300px；
宽度：240px；
边缘：1米；
<!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>

<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;
}