需要幫助將div與CSS對齊
[英]Need help aligning divs with CSS
問題描述
這是我想要div的地方。
這是瀏覽器正在執行的操作：
現在，我將div設置為在“行”中最多包含三個。 但是，div的第二行被迫排在第一行中最長的那一行之下。 我不確定如何使它們到達我想要的位置。感謝您的幫助！
這是我的代碼：
html { overflow: scroll; overflow-x: hidden; -webkit-appearance: none; } ::-webkit-scrollbar { width: 0vw; background: transparent; } body { font-family: Helvetica; text-align: center; background-image: url(../Images/background.png); background-attachment: fixed; margin: 0vw; padding: 0vw; } h1 { color: transparent; background: -webkit-linear-gradient(transparent, transparent), url(../Images/background.png) repeat; -webkit-background-clip: text; font-size: 2.25vw; } h2 { font-size: 1.8vw; } p { font-size: 1.1vw; } /* ID Section */ #NavandTitleBar { background-color: #ffffff; padding: 0.1vw; -webkit-animation: fadein 2s; animation: fadein 2s; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } #NavandTitleBar nav ul { list-style: none; padding: 0.01vw; } #NavandTitleBar nav ul li a { text-decoration: none; } #NavandTitleBar nav ul li a h3 { cursor: pointer; color: transparent; background: -webkit-linear-gradient(transparent, transparent), url(../Images/background.png) repeat; -webkit-background-clip: text; font-size: 1.3vw; } #navHome { position: absolute; left: 4%; top: 4%; } #navGallery { position: absolute; left: 12%; top: 4%; } #navAbout { position: absolute; right: 12%; top: 4%; } #navContact { position: absolute; right: 4%; top: 4%; } #main div{ display: inline-block; vertical-align: text-top; margin: 2vw; width: 20vw; background-color: white; padding: 1vw 3vw; text-align: justify; border-radius: 0.5vw; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -webkit-animation: fadein 2s; animation: fadein 2s; } #main div p { color: #555555; } #main div .completionDate { color: #999999; } /* Classes */ .username { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); background: -webkit-linear-gradient(top, #ffffff 5%, #ffffff 100%); background: linear-gradient(to bottom, #ffffff 5%, #ffffff 100%); border: 1px solid #bdb6bd; cursor: text; color: #000000; font-size: 1vw; padding: 1vw 2vw; text-shadow: 0 -1px 0 #ffffff; position: relative; top: 10vw; -webkit-animation: fadein 2s; animation: fadein 2s; } .password { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); background: -webkit-linear-gradient(top, #ffffff 5%, #ffffff 100%); background: linear-gradient(to bottom, #ffffff 5%, #ffffff 100%); border: 1px solid #bdb6bd; cursor: text; color: #000000; font-size: 1vw; padding: 1vw 2vw; text-shadow: 0 -1px 0 #ffffff; position: relative; top: 10.5vw; -webkit-animation: fadein 2s; animation: fadein 2s; } .submitbutton { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); background: -webkit-linear-gradient(top, #ffffff 5%, #ffffff 100%); background: linear-gradient(to bottom, #ffffff 5%, #ffffff 100%); background-color: #ffffff; border-radius: 5px; border: 1px solid #bdb6bd; cursor: pointer; color: rgba(0,0,0,0.4) !important; font-size: 1vw; padding: 1vw 6.18vw; text-shadow: 0 -1px 0 #ffffff; position: relative; top: 11vw; -webkit-animation: fadein 2s; animation: fadein 2s; } /* Animations */ @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Project Alyssa</title> <link rel="stylesheet" href="Resources/CascadingStyleSheet/project_alyssa.css"/> <link rel="icon" href="Resources/Images/project_alyssa.ico"/> <script src="Resources/JavaScript/project_alyssa.js"></script> </head> <body> <div id="NavandTitleBar"> <nav id="leftNav"> <ul> <li id="navHome"><a href="project_alyssa.html"><h3>Home</h3></a></li> <li id="navGallery"><a href="Secondary/gallery.html"><h3>Gallery</h3></a></li> </ul> </nav> <h1>Project Alyssa</h1> <nav id="rightNav"> <ul> <li id="navAbout"><a href="Secondary/about.html"><h3>About</h3></a></li> <li id="navContact"><a href="Secondary/contact.html"><h3>Contact</h3></a></li> </ul> </nav> </div> <div id="main"> <div id="introduction"> <h2>Blah</h2> <p> Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. </p> </div> <div id="hope"> <h2>Blah Blah Blah</h2> <p> Hello World. </p> </div> <div id="theday"> <h2>Blah Blah Blah Blah Blah</h2> <p> Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. </p> <p class="completionDate"> Hello World. </p> </div> <div id="ithink"> <h2>Blah Blah Blah Blah</h2> <p> Hello World. </p> </div> <div id="stupidthings"> <h2>Blah Blah Blah Blah Blah</h2> <p> Hello World. </p> </div> <div id="blahblah"> <h2>Blah Blah Blah.</h2> <p> Hello World. </p> </div> </div> </body> </html>
2 個解決方案
解決方案1
0 2016-12-17 13:53:31
<table id="homeTable" align="center" >
......
</table>
如果您需要全角使用
<table id="homeTable" align="center" style="width:100%" >
......
</table>
解決方案2
0 已采納 2016-12-17 15:03:43
您試圖實現的翻轉效果不會在您的結構中發生，因為您使用的是顯示為嵌入式塊的表格單元，這具有您描述為“問題”的特殊效果。
如果使用div更新html，則最接近的是div的向左浮動行為。
我的猜測是，您要尋找的是https://material.angularjs.org/latest/demo/card之類的東西，您可以以更輕松的方式使用列。
So
看到這個小提琴。它使用3列，但您可以使用需要的列數，您可以在其中按順序在每一列中添加項目，以便它們按需要流動。
需要幫助並排對齊3個div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.