我對(duì) html 和 css 相當(dāng)陌生，并且在理解布局方面遇到困難。這是我創(chuàng)建的一個(gè)示例來(lái)展示我的問(wèn)題。我期望 #bottom 位于 #page 內(nèi)部，但位于 #page 下方。另外，我認(rèn)為應(yīng)該位于 #page 下方的 div #else 與 #bottom 位于同一空間。你能幫我理解我在這里做錯(cuò)了什么嗎？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貢獻(xiàn)1798條經(jīng)驗(yàn) 獲得超3個(gè)贊
我想你可以看到這個(gè)
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貢獻(xiàn)1863條經(jīng)驗(yàn) 獲得超2個(gè)贊
我只是對(duì)您的代碼做了一些調(diào)整，希望您沒(méi)問(wèn)題：
注意：以全屏模式查看更清晰。
#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>
天涯盡頭無(wú)女友
TA貢獻(xiàn)1831條經(jīng)驗(yàn) 獲得超9個(gè)贊
我的建議是您使用 Flexbox。這是我使用 HTML5 選擇器所做的快速響應(yīng)式設(shè)計(jì)。由于您是 HTML/CSS 新手，我建議您開(kāi)始以這種方式學(xué)習(xí)并避免太多div課程，因?yàn)檫@對(duì)于可訪問(wèn)性來(lái)說(shuō)效果不佳，而可訪問(wèn)性是當(dāng)今開(kāi)發(fā)世界的一個(gè)大問(wèn)題。
這是一個(gè)您可以使用的代碼筆。
/* 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貢獻(xiàn)2080條經(jīng)驗(yàn) 獲得超4個(gè)贊
<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 關(guān)注
- 145 瀏覽
添加回答
舉報(bào)
0/150
提交
取消