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

Question

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

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

请参阅下面我的代码。我尝试只复制需要的内容，希望没有遗漏任何内容。

提前致谢！

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

好吧，在发送问题后不到一分钟，我的记忆就再次连接起来，我记得如何做到这一点。 Margin 是父容器的边距，同时仅填充到前一个元素。因此，为了获得我想要的漂亮线条，我只是将左边距增加到适当的大小。它有效，我希望我解释正确......

Answer 2

另一种方法是根本不使用边距/填充。将两个元素向左浮动，因此无论高度如何，它们始终并排放置。

关于浮动的丰富资源：http://www.westvalley.edu/common /tutorial/instruct/cssTutorial/index__1094.htm

Answer 3

实际上，如果你漂浮，你只会漂浮在你的部分漂浮的部分。如果你想“保留”该区域，你实际上需要有 display: inline-block。它的行为就像一个块 div，同时又有点像一个跨度。

我可能改变了很多东西，但在这里我发布了一个jsfiddle：
http://jsfiddle.net/o9vLpbe4/

确保您的 #maincontent.width + #subsections。宽度< #container.width，包括填充和其他内容。为了简化而将其全部归零。由于它的行为类似于跨度，因此如果尺寸不适合该行，它将中断到另一行。

我还将 #subsections 和 #maincontent 放入 div 内。