css中如何自定義每一列的流動性？
[英]How to customize each column's fluidity in css?
問題描述
好的，所以我在 css 中有三列。 單擊此處查看列的屏幕截圖。 當我調整窗口的大小時，最左邊的列的左側停留在一個固定的位置。 我也想用右欄的右側做同樣的事情。 其他所有邊（中欄、左欄右側、右欄左側）均可調節。 現在，唯一固定的位置是最左側的列的左側。 甚至有可能像這樣定制修復（？）？ 另外，如何讓列固定在頂部而不是底部？ 我也在圖中圈出了這個。 當一列比其他列大時，較小的列將停留在底部高度，而不是我想要的頂部。 我真的很感激你的幫助。 我對 css 和 html 有點陌生，所以我還在學習。 另外，如果我沒有很好地解釋它，我深表歉意，我希望截圖和代碼有幫助！ 非常感謝！
* { box-sizing: border-box; } /* Add a card effect for ticker(s) */ .card { background-color: rgb(24, 28, 41); padding: 5px; border-style: solid; border-width: 2px; border-color: rgb(5, 105, 256); /*rgb(196, 95, 0)*/ border-radius: 3px; margin: 1%; } body { margin: 0; } /* Style the header */ .header { background-color: rgb(5, 105, 256)/*rgb(196, 95, 0)*/ padding: 15px; text-align: center; } /* Style the top navigation bar */ .topnav { overflow: hidden; background-color: #333; } /* Style the topnav links */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /* Change color on hover */ .topnav a:hover { background-color: #ddd; color: black; } /* Create three equal columns that floats next to each other */ .column { display: inline-block; width: 30.5%; padding: 15px; border-style: solid; border-width: 2px; border-color: rgb(5, 105, 256); /*rgb(196, 95, 0)*/ border-radius: 3px; margin-left: 1%; margin-right: 1%; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */ @media screen and (max-width:600px) { .column { width: 98%; } } body { background-color: rgb(24, 28, 41); color: rgb(255, 255, 255); font-family: "Helvetica", "Arial", sans-serif; margin: 0; padding: 0; }
</head> <body> <div class="topnav"> <a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a> </div> <div class="card"> <label for="ticker">Ticker(s):</label> <input type="text" id="ticker" name="ticker" value="" style="text-transform:uppercase"><br> </div> <div class="row"> <div class="column"> <h2>Column</h2> <p>INPUT INFO LATER INPUT INFO LATER</p> </div> <div class="column"> <h2>Column</h2> <p>INPUT INFO LATER</p> </div> <div class="column"> <h2>Column</h2> <p>INPUT INFO LATER</p> </div> </div> </body> </html>
2 個解決方案
解決方案1
1 2020-08-27 23:00:50
row類中使用display: flex 。
注意：如果您刪除所有內容 ( * ) 上的box-sizing: border-box樣式，您還將刪除兩側的不等間距。
/* Add a card effect for ticker(s) */ .card { background-color: rgb(24, 28, 41); padding: 5px; border-style: solid; border-width: 2px; border-color: rgb(5, 105, 256); /*rgb(196, 95, 0)*/ border-radius: 3px; margin: 1%; } body { margin: 0; } /* Style the header */ .header { background-color: rgb(5, 105, 256)/*rgb(196, 95, 0)*/ padding: 15px; text-align: center; } /* Style the top navigation bar */ .topnav { overflow: hidden; background-color: #333; } /* Style the topnav links */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /* Change color on hover */ .topnav a:hover { background-color: #ddd; color: black; } /* Create three equal columns that floats next to each other */ .column { display: inline-block; width: 30.5%; padding: 15px; border-style: solid; border-width: 2px; border-color: rgb(5, 105, 256); /*rgb(196, 95, 0)*/ border-radius: 3px; margin-left: 1%; margin-right: 1%; overflow: hidden; } /* Clear floats after the columns */ .row { display: flex; } /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */ @media screen and (max-width:600px) { .column { width: 98%; } } body { background-color: rgb(24, 28, 41); color: rgb(255, 255, 255); font-family: "Helvetica", "Arial", sans-serif; margin: 0; padding: 0; }
</head> <body> <div class="topnav"> <a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a> </div> <div class="card"> <label for="ticker">Ticker(s):</label> <input type="text" id="ticker" name="ticker" value="" style="text-transform:uppercase"><br> </div> <div class="row"> <div class="column"> <h2>Column</h2> <p>INPUT INFO LATER INPUT INFO LATER</p> </div> <div class="column"> <h2>Column</h2> <p>INPUT INFO LATER</p> </div> <div class="column"> <h2>Column</h2> <p>INPUT INFO LATER</p> </div> </div> </body> </html>
解決方案2
0 2020-08-27 23:20:41
您也可以使用網格輕松地做到這一點。 完全響應更容易，並且您可以根據需要添加 mcuh 列和框。 它會自動調整。
* { box-sizing: border-box; } /* Add a card effect for ticker(s) */ .card { background-color: rgb(24, 28, 41); padding: 5px; border-style: solid; border-width: 2px; border-color: rgb(5, 105, 256); /*rgb(196, 95, 0)*/ border-radius: 3px; margin: 1%; } body { margin: 0; } /* Style the header */ .header { background-color: rgb(5, 105, 256)/*rgb(196, 95, 0)*/ padding: 15px; text-align: center; } /* Style the top navigation bar */ .topnav { overflow: hidden; background-color: #333; } /* Style the topnav links */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /* Change color on hover */ .topnav a:hover { background-color: #ddd; color: black; } /* Create three equal columns that floats next to each other */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; grid-gap: 1%; margin: 0 1% 0 1%; } .column { padding: 15px; border-style: solid; border-width: 2px; border-color: rgb(5, 105, 256); /*rgb(196, 95, 0)*/ border-radius: 3px; } /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */ @media screen and (max-width:600px) { body { background-color: rgb(24, 28, 41); color: rgb(255, 255, 255); font-family: "Helvetica", "Arial", sans-serif; margin: 0; padding: 0; } .grid { display: grid; grid-template-columns: repeat(1, 1fr); grid-auto-rows: auto; grid-gap: 1%; margin: 0 1% 0 1%; }
</head> <body> <div class="topnav"> <a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a> </div> <div class="card"> <label for="ticker">Ticker(s):</label> <input type="text" id="ticker" name="ticker" value="" style="text-transform:uppercase"><br> </div> <div class="grid"> <div class="column"> <h2>Column</h2> <p>INPUT INFO LATER INPUT INFO LATER</p> </div> <div class="column"> <h2>Column</h2> <p>INPUT INFO LATER</p> </div> <div class="column"> <h2>Column</h2> <p>INPUT INFO LATER</p> </div> </div> </body> </html>
CSS三列布局流暢
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.