Question

我对Facebook如何定位他们的两个旁边和一个部分非常着迷。

例如：组|新闻源|广告，Pop-Ups等

我的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;
}

亲切的问候，和提前致谢。亚历克斯。

Answer 1

到＃page-content add float：left; ＆安培;从旁边删除清除：左;

CSS特定的旁边定位像Facebook一样

1 个答案: