自定義版式，使用橫斷面和旁白

Question

我希望旁邊放在右側，而部分放在左側。 一切都應該在空間的中間。

請看這個鏈接

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

Answer 1

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

Answer 2

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>  
<script type="text/javascript" src="/js/lib/dummy.js"></script>  
<link rel="stylesheet" type="text/css" href="/css/result-light.css">  
<style type="text/css">
#main {
  width: 100%;
  margin: 0 auto;
 text-align: center;
}
section {
  overflow: left;
  float: left;
  width: 75%;
}

 .righttt {
    position: relative;
    right: 0px;
    width: 25%;
    float: right;
  }

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

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


</div>
<div style="width: 100%;float: left;  text-align: center;"><footer>
Copyright © W3Schools.com
</footer></div>
</body></html>

試試這個代碼。 你嘗試這個嗎？ https://jsfiddle.net/zc15jeLd/1/

自定義版式，使用橫斷面和旁白

問題描述

2 個解決方案

解決方案1
0 2015-05-28 10:17:53

解決方案2
0 2015-05-28 10:17:54

自定義版式，使用橫斷面和旁白

問題描述

2 個解決方案

解決方案1 0 2015-05-28 10:17:53

解決方案2 0 2015-05-28 10:17:54

解決方案1
0 2015-05-28 10:17:53

解決方案2
0 2015-05-28 10:17:54