0

コンテンツdivの横にあるサイドバーを作成しようとしていますが、コンテンツdivの下にあり、正しいyではなく正しいxの位置にあります。

HTML:

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

CSS:

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

4 に答える 4

1

ここでは、の前に#html, body''は必要ありません。あなたが持っている#html#sidebar

float:left;
float:right;

...あなたはそれを絶対的に位置づけているので、あなたはそれのどれも考えないでください。JSFiddleも役に立ちます。

于 2012-09-28T21:02:51.907 に答える
1

コンテンツを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
于 2012-09-28T21:13:36.633 に答える
0

あなたの質問は少し矛盾しているようです...あなたのコードのビットもそうです。

サイドバーをコンテンツdivの右側に沿って配置するだけの場合は、コード内のコンテンツdivの上にサイドバーdivを移動して、「float:right」を割り当てることができます。

「ただし、コンテンツdivの下にある」ということで、視覚的なレイアウトではなくコードを参照している場合は、コンテンツdivを左にフロートさせ、サイドバーのフロート(またはフロート:右)を削除できます。

また、#sidebar cssで、左と右の両方で競合するフロートを宣言していることに気付きました。

于 2012-09-28T21:01:37.927 に答える
0

コンテナにもフロートを含めます。

于 2012-09-28T21:00:59.833 に答える