我有一个页面,左侧有一个菜单,右侧有一个包含大量文本的新部分。文本的开始位置是正确的,但一旦文本低于左侧菜单的高度,文本的位置就会更靠左。
我理解这是因为该部分向左浮动(如果我错了请纠正我)并根据填充和边距定位。但是,如果我想在我的右侧部分保留文本的左侧垂直线,我该怎么办?如果我使用绝对定位,“页脚”(这是另一个 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> © 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;
}
最佳答案
好吧,发送问题后不到一分钟,我的内存又恢复了,我记得该怎么做。边距是父容器的边距,而只填充到前面的元素。所以,为了得到我想要的漂亮线条,我只是将左边距增加到适当的大小。它有效,我希望我解释正确...
关于html - 如何将具有大量文本的相关元素放置在不那么高的元素旁边,向左浮动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2243908/