頁面內容出現在側邊欄下

我正在用側邊欄創建html佈局。但是我的標題和內容在下方出現，而不是旁邊的。頁面內容出現在側邊欄下

.container { position:relative; padding:10px; top:0px; right: 0; left: 0; height: 1200px;} #sidebar { position:relative; top:0; bottom:0; left:0; width:200px; height: 1000px; background: gray; } #header { border:1px solid #000; height:300px; padding:10px; margin-left: 200px; } #content { border:1px solid #000; height:700px; margin-left: 200px;; padding:10px; }

<div class="container"> <div id="sidebar"> <a href="#"> Link1 </a> </div> <div id="header"> <h2 class="title">Title</h2> <h3>Header content</h3> </div> <div id="content"> <center> <p>Hello</p> </center> </div> </div> \t \t

感謝

來源

2017-06-15 Ruth Young

你試過只是改變 '的位置是：相對的;'到'位置：絕對;'？就像在這個小提琴：https：//jsfiddle.net/khs8j3gu/ – Rubenxfd

@Rubenxfd這已經最好......但每個div的內容然後不與邊界排隊....它都在它下面.. –

你究竟是什麼意思？邊框與側邊欄略有不成比例？您可以通過添加邊距來解決此問題。也許這是你需要的？ https://jsfiddle.net/khs8j3gu/2/ – Rubenxfd

您應該嘗試將您的position: relative;更改爲position: absolute;。然後，您可以使用餘量調整您的div的位置。

HTML：

<div class="container"> 
    <div id="sidebar"> 
     <a href="#"> Link1 </a> 
    </div> 
    <div id="header"> 
    <h2 class="title">Title</h2> 
    <h3>Header content</h3> 
    </div> 
    <div id="content"> 
    <center> 
     <p>Hello</p> 
    </center> 
    </div> 
</div>

CSS：

.container { position:relative; padding:10px; top:0px; right: 0; left: 0; height: 1200px;} 
#sidebar { 
    position:absolute; 
    top:0; bottom:0; left:0; 
    width:200px; 
    height: 1000px; 
    background: gray; 
} 

#header { border:1px solid #000; height:300px; 
    padding:10px; margin-left: 200px; 
    margin-top:-10px; 

} 
#content { border:1px solid #000; height:700px; margin-left: 200px;; 
    padding:10px; 
}

工作小提琴：https://jsfiddle.net/khs8j3gu/2/

祝你好運！

來源

2017-06-15 08:18:09 Rubenxfd

只需添加

#sidebar { 
    float:left; 
}

.container { position:relative; padding:10px; top:0px; right: 0; left: 0; height: 1200px;} 
 
#sidebar { 
 
    position:relative; 
 
    top:0; bottom:0; left:0; 
 
    width:200px; 
 
    height: 1000px; 
 
    background: gray; 
 
    float:left; 
 
} 
 

 
#header { border:1px solid #000; height:300px; 
 
    padding:10px; margin-left: 200px; 
 
} 
 
#content { border:1px solid #000; height:700px; margin-left: 200px;; 
 
    padding:10px; 
 
}

<div class="container"> 
 
    <div id="sidebar"> 
 
     <a href="#"> Link1 </a> 
 
    </div> 
 
    <div id="header"> 
 
    <h2 class="title">Title</h2> 
 
    <h3>Header content</h3> 
 
    </div> 
 
    <div id="content"> 
 
    <center> 
 
     <p>Hello</p> 
 
    </center> 
 
    </div> 
 
</div>

來源

2017-06-15 08:00:59 LKG

在我的佈局上，這使得我的div內容出現在我的div之外......？標題和內容邊框跨越整個頁面，我的側欄向下移動。 –

有點更清楚，請我不明白 – LKG

添加「display：inline-block;」到您要相互顯示的元素。

來源

2017-06-15 08:04:11

我已經介紹了.inner-container並定義了兩個flexbox。 CSS被簡化了。

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.container { 
 
    display: flex; 
 
} 
 

 
.inner-container { 
 
    display: flex; 
 
    flex-flow: column; 
 
    width: 80%; 
 
} 
 

 
#sidebar { 
 
    width: 20%; 
 
    background: gray; 
 
} 
 

 
#header { 
 
    border: 1px solid black; 
 
    height: 300px; 
 
    padding: 10px; 
 
} 
 

 
#content { 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
}

<div class="container"> 
 
    <div id="sidebar"> 
 
    <a href="#"> Link1 </a> 
 
    </div> 
 
    <div class="inner-container"> 
 
    <div id="header"> 
 
     <h2 class="title">Title</h2> 
 
     <h3>Header content</h3> 
 
    </div> 
 
    <div id="content"> 
 
     <center> 
 
     <p>Hello</p> 
 
     </center> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-06-15 08:20:22 Gerard

頁面內容出現在側邊欄下

回答

相關問題