Html 使用CSS将边栏放置在内容旁边
我试图创建一个侧边栏，它位于content div的旁边，但它位于content div的下面，它位于正确的x位置，而不是正确的y位置 HTML:Html 使用CSS将边栏放置在内容旁边,html,css,sidebar,Html,Css,Sidebar,我试图创建一个侧边栏，它位于content div的旁边，但它位于content div的下面，它位于正确的x位置，而不是正确的y位置 HTML: <body> <div id="framediv"> <div id="headerdiv"> </div> <div id="content" class="container"> Lorem ipsum
<body>
<div id="framediv">
<div id="headerdiv">
</div>
<div id="content" class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla adipiscing velit, a pharetra sem dictum vel. Aliquam varius porta est, vitae pulvinar nunc adipiscing in. Maecenas sem eros, gravida nec blandit vel, aliquam at dui. Aliquam ante est, lacinia id laoreet ac, convallis ac magna. Maecenas rhoncus ligula vitae mauris volutpat sed dapibus lectus fringilla. Nam orci metus, molestie eu placerat sit amet, faucibus in libero. Nunc tristique, elit vitae tincidunt rutrum, odio erat blandit nibh, eu facilisis sapien dolor rhoncus risus. Ut eu velit lectus. Sed vitae nisl orci. Nulla vel nisl ante. Donec sit amet nulla eget massa euismod ultrices vitae at nisi. Donec tempor justo auctor libero dapibus viverra. Cras commodo fermentum nisi. Maecenas porttitor euismod metus lacinia sodales. Aliquam egestas ligula purus, id sollicitudin risus. Nullam vel odio et libero viverra blandit vel et dolor.
Nullam mauris dui, consequat a placerat eu, semper non mi. Nam in leo vel lorem adipiscing commodo. Duis vestibulum erat vel felis tincidunt in congue ipsum rutrum. Sed in ipsum ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra nisi eget arcu malesuada at dapibus elit varius. Morbi sodales, justo fermentum lobortis elementum, orci turpis vehicula nisl, quis laoreet sapien libero a leo. Aenean ac arcu augue, vitae pellentesque ipsum. Ut nec mauris at nisl luctus tempor a sed turpis. Pellentesque in odio libero, sit amet tincidunt nisl. Duis dictum tortor vitae sem sagittis in molestie nisl interdum. Maecenas mollis adipiscing augue, eget accumsan justo ultrices a. Suspendisse scelerisque justo et nisl consectetur a varius lacus sodales. Duis accumsan iaculis nulla, non pretium metus venenatis et. Sed gravida elementum ipsum sed aliquet.
Vestibulum tincidunt pulvinar aliquet. Nullam bibendum vulputate diam quis mattis. Etiam mollis dui eu quam feugiat pharetra. Donec non tempus eros. Fusce eleifend magna eu lorem imperdiet bibendum rhoncus eget odio. Etiam adipiscing nibh sit amet augue elementum tempus. Etiam hendrerit massa a augue laoreet vitae pretium enim aliquet. Mauris malesuada lorem vitae neque pretium convallis. Sed condimentum semper ipsum, consectetur imperdiet eros interdum eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec adipiscing nisi in erat feugiat tempor. Nunc tincidunt neque non nisl tristique quis ornare elit ornare.
Praesent nec augue ligula, quis iaculis diam. Nam eget felis est, eget pellentesque lectus. Ut suscipit varius magna, ac vestibulum risus egestas ac. Quisque id sapien sed leo luctus faucibus in non leo. Integer sit amet pellentesque velit. Vivamus convallis, lacus nec tincidunt viverra, nunc velit aliquam nisi, eu pretium tellus nisl eget eros. Etiam dolor leo, feugiat vel faucibus ac, ullamcorper quis turpis. Mauris nec felis elit. Donec dignissim ullamcorper arcu. Proin tempor, dui vel malesuada viverra, lacus mauris ullamcorper lacus, eu convallis dolor justo non massa. Maecenas volutpat, leo gravida eleifend pharetra, dolor mauris tempor odio, quis facilisis tellus nisl quis sapien. Donec quam mauris, malesuada id iaculis ut, pellentesque non mauris. Nullam interdum justo id nunc tempor sed consequat quam venenatis.
Curabitur ipsum augue, posuere at adipiscing nec, rutrum in nisi. Ut mattis placerat est aliquam vulputate. Nullam faucibus, libero in facilisis auctor, lectus metus suscipit ligula, quis sollicitudin ligula erat sit amet nisi. Suspendisse et suscipit lectus. Sed fermentum porta lorem, vel congue tortor sollicitudin molestie. Nulla imperdiet purus non velit ornare vestibulum id at massa. Curabitur lorem urna, fermentum ut suscipit sed, pretium sed ante. Nullam ligula ante, aliquam at blandit ac, aliquam in velit. Cras nisl libero, iaculis at rutrum ac, mollis nec tortor. Aenean dignissim viverra molestie. Vivamus ultricies sem purus, tempor pharetra elit. Sed placerat est at turpis eleifend accumsan. Cras metus ante, imperdiet et suscipit ut, interdum eget est. In rutrum imperdiet mi in consectetur.
</div>
<div id="sidebar" align="center" class="container">
<p>dvsdvs</p>
</div>
</div>
</body>
#menudiv{
display:inline-block;
float:none;
padding-bottom:20px;
}
#html, body {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width:980px;
height: 100%;
margin: auto;
}
#headerdiv{
width:950px;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow:10px 10px 20px #000;
}
#content.container{
height:100%;
width: 640px;
padding-top:50;
margin-top:50;
padding-left: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
border:thin;
border-color:#CCC;
border-style:solid;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow:10px 10px 20px #000;
}
#sidebar{
position:absolute
float:left;
float:right;
top:250px;
height:100%;
width: 280px;
border:thin;
border-color:#CCC;
border-style:solid;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow:10px 10px 20px #000;
}
在你的容器中也包括浮子。你的问题似乎有点矛盾。。。就像你的代码一样 如果您只是想让边栏沿着内容div的右侧落下，那么您可以在代码中将边栏div移动到内容div的上方，并为其指定一个“float:right” 如果通过“但它位于内容div的下方”，您指的是与视觉布局相反的代码，那么您可以将内容div浮动到左侧，并删除侧栏上的浮动（或浮动：右侧） 我还注意到，在你的侧边栏css中，你正在声明左右浮动冲突。这里
#html，bodyhtml#侧边栏上float:left;
float:right;
jsiddle也会有帮助。用DIV包装您的内容
<div id="content" class="container">
<div id="maincontent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla adipiscing
velit, a pharetr
</div>
<div id="sidebar" align="center" class="container">
<p>dvsdvs</p>
</div>
</div>
.container#maincontent {float:left: width:75%} //75% minus paddings minus margins minus borders
.container#sidebar {float:right; width:25%} //25% minus paddings minus margins minus borders
Lorem ipsum dolor sit amet，是一位杰出的献身者。普拉森特弗林利亚酒店
维利特，一个骗子
DVSDV
.container#maincontent{float:left:width:75%}//75%减去填充减去边距减去边框
.container#边栏{float:right；width:25%}//25%减去填充减去边距减去边框