我希望旁边放在右侧,而部分放在左侧。一切都应该在空间的中间。

请看看这个link

<!DOCTYPE html>
<html>
<head>
<style>
#main {
 width: 800px;
  margin: 0 auto;
}

.righttt{
  position: relative;
  right: 0px;
  width: 200px;

}

section {

overflow: left;

}


</style>
</head>
<body>

    <header>
    <h1>City Gallery</h1>
    </header>

    <div id="main">
        <section>
        <h1>London</h1>
        <p>
        London is the capital city of England. It is the most populous city in the United Kingdom,
        with a metropolitan area of over 13 million inhabitants.
        </p>
        <p>
        Standing on the River Thames, London has been a major settlement for two millennia,
        its history going back to its founding by the Romans, who named it Londinium.
        </p>
        </section>

        <section>
        <h1>London</h1>
        <p>
        London is the capital city of England. It is the most populous city in the United Kingdom,
        with a metropolitan area of over 13 million inhabitants.
        </p>
        <p>
        Standing on the River Thames, London has been a major settlement for two millennia,
        its history going back to its founding by the Romans, who named it Londinium.
        </p>
        </section>

        <aside class="righttt">
        <h1>London</h1>
        <p>
        London is the capital city of England. It is the most populous city in the United Kingdom,
        with a metropolitan area of over 13 million inhabitants.
        </p>
        <p>
        Standing on the River Thames, London has been a major settlement for two millennia,
        its history going back to its founding by the Romans, who named it Londinium.
        </p>
        </aside>
    </div>

    <footer>
    Copyright © W3Schools.com
    </footer>

</body>
</html>

最佳答案

#wrapper {
    width: 100%;
    height: 100%;
}

#header {
    width: 100%;
    height: 50px;
    background-color: green;
}

#nav {
    width: 100%;
    height: 50px;
    background-color: red;
}

#section {
    width: 50%;
    height: 100px;
    background-color: yellow;
    float: left;
}

#aside {
    float: right;
    width: 50%;
    height: 200px;
    background-color: green;
}

#article {
    float: left;
    width: 50%;
    height: 100px;
    background-color: orange;
}

#footer {
    width: 100%;
    height: 50px;
    display: inline-block;
    background-color: blue;
}

<div id="wrapper">
    <div id="header">
        Header
    </div>
    <div id="nav">
       Navigation
    </div>
    <div id="section">
        Section
    </div>
    <div id="aside">
        Section
    </div>
    <div id="article">
        Article
    </div>
    <div id="footer">
        footer
    </div>
</div>

关于javascript - 自定义版式,使用横断面和旁白,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30503115/

10-13 08:07