我對 html 和 css 相當陌生，并且在理解布局方面遇到困難。這是我創建的一個示例來展示我的問題。我期望 #bottom 位于 #page 內部，但位于 #page 下方。另外，我認為應該位于 #page 下方的 div #else 與 #bottom 位于同一空間。你能幫我理解我在這里做錯了什么嗎？header { display: block; margin: 0px auto; height: 20vh; width: 80vw; border: 1px solid green;}#page { margin: 0 auto; width: 90vw; border: 3px solid black;}#main { display: block; float: left; height: 60vh; width: 67.5vw; border: 1px solid green;}#side { display: inline-block; margin-left: 2px; height: 60vh; width: 21.5vw; border: 1px solid green;}#bottom { float: left; margin: 0 auto; height: 4vh; width: 90vw; border: 1px solid green;}#else { height: 10vh; width: 90vw; background-color: red; margin: 0 auto;}<div id="page"> <header> </header> <div id="main"> </div> <div id="side"> </div> <div id="bottom"> </div> </div> <div id="else"> </div>
4 回答
呼如林
TA貢獻1798條經驗 獲得超3個贊
我想你可以看到這個
header {
display: block;
margin: 0px auto;
height: 20vh;
width: 90vw;
background-color: #011a2f
}
#page {
margin: 0 auto;
width: 90vw;
}
#main {
float: left;
height: 60vh;
width: 67.5vw;
background-color: #323232
}
#side {
overflow: hidden;
margin-left: 2px;
height: 60vh;
width: 22.5vw;
background-color: #ff1e56;
}
#bottom {
height: 5vh;
width: 90vw;
background-color: #000000;
}
#else {
height: 10vh;
width: 90vw;
background-color: #ffac41;
margin: 0 auto;
}
<div id="page">
<header></header>
<div id="main"></div>
<div id="side"></div>
<div id="bottom"></div>
</div>
<div id="else"></div>
小唯快跑啊
TA貢獻1863條經驗 獲得超2個贊
我只是對您的代碼做了一些調整，希望您沒問題：
注意：以全屏模式查看更清晰。
#page {
margin: 0 auto;
width: 90vw;
border: 1px solid black;
}
header {
display: absolute;
margin: 0px auto;
height: 20vh;
width: 80vw;
border: 1px solid green;
}
#main {
float: left;
height: 60vh;
width: 67.5vw;
border: 1px solid green;
}
#side {
display: inline-block;
margin-left: 2px;
height: 60vh;
width: 21.5vw;
border: 1px solid green;
}
#bottom {
height: 4vh;
width: 90vw;
border: 1px solid green;
background-color:green;
}
#else {
height: 10vh;
width: 90vw;
background-color: pink;
margin: 0 auto;
}
<div id="page">
<header>header
</header>
<div id="main">main
</div>
<div id="side">side
</div>
<div id="bottom">bottom
</div>
</div>
<div id="else">else
</div>
天涯盡頭無女友
TA貢獻1831條經驗 獲得超9個贊
我的建議是您使用 Flexbox。這是我使用 HTML5 選擇器所做的快速響應式設計。由于您是 HTML/CSS 新手，我建議您開始以這種方式學習并避免太多div課程，因為這對于可訪問性來說效果不佳，而可訪問性是當今開發世界的一個大問題。
這是一個您可以使用的代碼筆。
/* Roboto Font */
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
height: 100vh; /* Avoid the IE 10-11 `min-height` bug. */
font-family: 'Roboto', sans-serif;
}
.content {
flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
background: darkgray;
}
header {
height: 20vh;
display: flex;
justify-content: center;
align-items: center;
background: #ccc;
}
header h1 {
font-size: 4rem;
font-weight: 300;
}
main {
display: flex;
}
article {
width: 70%;
justify-content: flex-start;
padding: 0.5rem;
}
aside {
width: 30%;
justify-content: flex-end;
padding: 0.5rem;
}
.footer {
flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
padding: 20px;
}
@media (max-width: 600px) {
main {
flex-direction: column;
}
main > article, aside {
width: 100%;
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
footer {
background: #333333;
color: white;
margin: 0;
text-align: center;
}
<div class="content">
<header>
<h1>Header</h1>
</header>
<main>
<article>
<h3>Current Article</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit vero quibusdam maxime magnam rerum nemo provident? Commodi, non! Ad facilis, doloribus voluptatum alias nostrum voluptatibus enim libero, distinctio nam sunt similique pariatur nesciunt accusantium eveniet perferendis ea doloremque molestiae culpa consequuntur quia aspernatur, itaque voluptate? Voluptatem magni delectus harum totam.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga rerum repudiandae error eveniet est explicabo, nihil eum. Inventore laboriosam consectetur dolor consequatur. Unde in doloribus repellendus dolorum perferendis officia hic?</p>
<p>Dicta molestias doloremque, corrupti dolorum ipsum ea perferendis neque a, animi magnam ab sint impedit repudiandae aspernatur vel natus cum suscipit vero nisi nihil blanditiis iste laborum. Eum, sunt quo!</p>
<ul>
<li>Lorem ipsum dolor sit.</li>
<li>Nisi doloremque ut deserunt?</li>
<li>Impedit aliquam itaque placeat.</li>
<li>Sit incidunt iure assumenda.</li>
<li>Inventore fuga optio perferendis!</li>
</ul>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus illum aut quia alias delectus labore, maiores, excepturi quae nisi a non consequuntur! Officia fugiat enim nostrum molestias ipsa! Deleniti, repudiandae!</p>
<p>Illo, reprehenderit? Ipsum velit aut, ducimus minima in accusamus aperiam ex cumque recusandae tenetur architecto nemo repellat asperiores eum. Corrupti blanditiis, odio sequi ea ducimus ipsam temporibus culpa asperiores dicta.</p>
<p>Maxime alias, natus veritatis quis mollitia itaque voluptate iure neque dolore, expedita eaque, in ea sunt quibusdam ut ducimus fugit doloribus! Corporis molestiae nobis quae nesciunt inventore alias sed error.</p>
<p>Id est repellendus pariatur harum, hic sequi vero ab mollitia corporis nisi, consequuntur eaque doloremque, suscipit nobis velit dolore totam exercitationem facere voluptas iure? Temporibus eius minus vero aut cumque!</p>
</article>
<aside>
<h4>In other news:</h4>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Placeat, culpa.</p>
<p>Molestiae, officiis non esse perspiciatis provident a doloribus dignissimos sint!</p>
<p>Inventore nihil illum maxime ipsa repudiandae quia omnis quae consequuntur!</p>
</aside>
</main>
</div>
<footer class="footer">
Company Name | All rights reserved ©2020
</footer>
犯罪嫌疑人X
TA貢獻2080條經驗 獲得超4個贊
<body>
<div id="page">
<header>Header</header>
<div id="main">Main</div>
<div id="side">Side</div>
<div id="bottom">Bottom</div>
</div>
<div id="else">Else</div>
</body>
還有CSS
header {
display: block;
margin: 0px auto;
height: 20vh;
width: 80vw;
border: 1px solid green;
}
#page {
margin: 0 auto;
width: 90vw;
border: 3px solid black;
}
#main {
display: block;
float: left;
height: 60vh;
width: 67.5vw;
border: 1px solid green;
}
#side {
display: inline-block;
margin-left: 2px;
height: 60vh;
width: 21.5vw;
border: 1px solid green;
}
#bottom {
margin: 0 auto;
height: 4vh;
width: 90vw;
border: 1px solid green;
background-color:#ddd;
}
#else {
height: 10vh;
width: 90vw;
background-color: red;
margin: 0 auto;
}
https://codepen.io/erwinagpasa/pen/ZEGjqjY
- 4 回答
- 0 關注
- 146 瀏覽
添加回答
舉報
0/150
提交
取消