html - 如何将具有大量文本的相关元素放置在不那么高的元素旁边，向左浮动

Question

我有一个页面，左侧有一个菜单，右侧有一个包含大量文本的新部分。文本的开始位置是正确的，但一旦文本低于左侧菜单的高度，文本的位置就会更靠左。

我理解这是因为该部分向左浮动(如果我错了请纠正我)并根据填充和边距定位。但是，如果我想在我的右侧部分保留文本的左侧垂直线，我该怎么办？如果我使用绝对定位，“页脚”(这是另一个 div 部分)将向上移动并与文本重叠。通过将左侧菜单的高度定义为高于文本，我确实得到了一个漂亮的垂直文本行，但很难知道页 footer 分的位置。

请看下面我的代码。我试着只复制需要的东西，希望我没有遗漏任何东西。

提前致谢!

html:

<div id="container">

<div id="subsections">

<h4>Games</h4>

<ul id="subnav">
    <li><a href="games.html#theGame">The Game</a></li>
</ul>

</div><!-- END #subsections -->

<hr />

<div id="maincontent">

<h3>Welcome</h3>

<div id="welctext">

<p>Welcome to this site. Here you can find information about the applications that this company has developed. You can subscribe to information about new or updated applicaionts here.</p>

<p>This company is a small company that focus on developing application that can be used on the a mobile device. Presently the focus is on iPhone. Here you can find out what applications that are available right now. More to come...</p>

</div><!-- END #welctext -->

</div><!-- END #maincontent -->

<hr/>

<div id="footer">

<p> &copy; Some company name</p>

</div><!-- END #footer -->

</div><!-- END #container -->

</body>
</html>

CSS:

body {
    /*background-color: #333;*/
    /*background-color: #98310d;*/
    background-color: #d7e6f1;
    background-image: url(../images/graphics/back-tile.jpg);
    color: #4b5dcb;
    font-family: "Apple Braille", "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif;
    font-size: 0.9em;
    margin: 0;
    padding: 0 0 0 0px;
    /* IE auto center fix */
    text-align: left;
}

#container {
    line-height: 1.6em;
    margin: 0 auto 0 auto;
    width: 720px;
    padding: 20px 0px 0px 50px;
    text-align: justify;
    float: left;
}

#maincontent {
    margin: 0px 0px 0px  50px;
    padding: 0;
}

#subscribe {
    margin: 0px 0px 0 220px;
    padding: 0;
    text-align: left;
}

#subsections {
    float: left;
    margin-bottom: 40px;
    width: 220px;
    /*height: 1300px;*/
}

ul#subnav {
    list-style: none;
    margin: 0;
    padding: 14px 0 0 10px;
}

div#footer {
    border-top: 1px solid #FFF;
    clear: both;
    font-size: .75em;
    line-height: 1.3em;
    margin-bottom: 40px;
    padding-bottom: 10px; 

}

#welctext {
    padding: 0 0 16px 0;
}

Answer 1

好吧，发送问题后不到一分钟，我的内存又恢复了，我记得该怎么做。边距是父容器的边距，而只填充到前面的元素。所以，为了得到我想要的漂亮线条，我只是将左边距增加到适当的大小。它有效，我希望我解释正确...