CSS具體Aside像Facebook一樣定位

-1

我對Facebook如何定位他們的兩個旁白和一個部分非常着迷。CSS具體Aside像Facebook一樣定位

例如：組|新聞提要|廣告，彈出式廣告等

我在這裏有我的HTML和CSS。我試圖把我的主要部分放在中間，然後在右邊放一個粘性物。

這不是我的方式。

HTML：

<?php 
require_once 'misc/header.php'; 
require_once 'misc/footer.php'; 
?> 
<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Website</title> 
     <link rel="stylesheet" href="css/main.css"> 
    </head> 
    <body> 
     <div id="page_wrap"> 
      <header id="title"> 
       <img src="images/Icon.png" id="titleIcon">Retnix 
      </header> 
      <div id="page-content"> 
       <div id="content-block"> 
        Lorem Ipsum is simply dummy text of the printing and 
        typesetting industry. Lorem Ipsum has been the industry's 
        standard dummy text ever since the 1500s, when an unknown 
        printer took a galley of type and scrambled it to make a 
        type specimen book. It has survived not only five centuries, 
        but also the leap into electronic typesetting, remaining 
        essentially unchanged. It was popularised in the 1960s with 
        the release of Letraset sheets containing Lorem Ipsum 
        passages, and more recently with desktop publishing software 
        like Aldus PageMaker including versions of Lorem Ipsum. 
       </div> 
      </div> 
      <aside> 
       dsadas 
      </aside> 
     </div> 
    </body> 
</html>

CSS：

*{padding:0; margin: 0;} 

@font-face 
{ 
    font-family: 'infinityregular'; 
    src: url('../fonts/infinity-webfont.woff2') format('woff2'), 
     url('../fonts/infinity-webfont.woff') format('woff'), 
     url('../fonts/Infinity.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 

} 

#page_wrap 
{ 
    width: 100%; 
    text-align: center; 
    border: 1px solid black; 
} 

#page-content  
{ 
    border: 1px solid black; 
    width: 40%; 
    margin: auto; 
    padding: 20px; 
} 

#content-block 
{ 
    background-color: #ccccff; 
    white-space: normal; 
    font-family: 'infinityregular';; 
    font-size: 24px; 
} 

header 
{ 
    background-color: #66ff66; 
    padding: 10px; 
} 

#title 
{ 
    text-align: center; 
    font-size: 3em; 
    font-family: 'infinityregular'; 
} 

#titleIcon 
{ 
    width: 70px; 
    height: 70px; 
    margin-bottom: -13px; 
    margin-right: 10px; 
} 

aside 
{ 
    border: 1px solid black; 
    width: 20%; 
    float: right; 
    clear: left; 
    padding: 20px; 
}

親切的問候，並先謝謝了。 Alex。

來源

2017-03-22 ThatHashCodeGuy

to＃page-content add float：left;從旁邊移除&清除：left;

來源

2017-03-22 13:13:25

CSS具體Aside像Facebook一樣定位

回答

相關問題