我正在為一個不太懂技術的朋友制作一個網站。她想要一個根據她在后端輸入的文本行數而變大的框。
這是相關頁面。隨著她向串列中添加更多頁面，她希望淺灰色框（我猜也是深灰色框）增長。問題是，我只知道基本的 CSS 是為了好玩。
我一直在嘗試使用 CSS 網格來均勻地分隔條目，但這不起作用，而且我無法找到一種方法來根據文本來增加框。任何幫助表示贊賞。
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Watch as I Perform my own Tracheotomy
</title>
<link rel="shortcut icon" type="image/png" href="https://cdn.discordapp.com/attachments/889079414732779580/1028746579101876264/Icon.png"/>
</head>
<style>
.square {
height: 550px;
width: 100%;
background-color: #8C8C8C;
}
.square2 {
height: 400px;
width: 900px;
background-color: #B8B8B8;
margin: auto;
margin-bottom: 25px;
display: grid;
grid-template-rows: 80px 200px;
}
.square3 {
margin-top: 10px;
height: 100px;
width: 900px;
background-color: #8C8C8C;
margin: auto;
}
.log {
width: fit-content;
gap: 10px;
padding: 5px;
margin-bottom: 0em;
font-size:1.5em;
}
</style>
<body style="background-color:#212121;">
<div>
<p style="text-align:left; font-family:'Courier New'">
<FONT COLOR="#FFFFFF">
<br>
<u>Watch As I Perform My Own Tracheotomy.</u>
<br>
<br>
</p>
</div>
<div class="square">
<div class="square2">
<p style="text-align:left; color:#FFFFFF; margin-left:4%; font-family:'Courier New';"><FONT COLOR="#000000"><br><br>
<div class="log">
<br> <b>11/10/22</b> - <a href="https://juney-blues.tumblr.com/tracheotomy/7">Page 7</a> </div>
<div class="log">
<br> <b>09/10/22</b> - <a href="https://juney-blues.tumblr.com/tracheotomy/6">Page 6</a></div>
<div class="log">
<br> <b>09/10/22</b> - <a href="https://juney-blues.tumblr.com/tracheotomy/5">Page 5</a></div>
<div class="log">
<br> <b>09/10/22</b> - <a href="https://juney-blues.tumblr.com/tracheotomy/4">Page 4</a></div>
<div class="log">
<br> <b>08/10/22</b> - <a href="https://juney-blues.tumblr.com/tracheotomy/3">Page 3</a></div>
<div class="log">
<br> <b>08/10/22</b> - <a href="https://juney-blues.tumblr.com/tracheotomy/2">Page 2</a></div>
<div class="log">
<br> <b>08/10/22</b> - <a href="https://juney-blues.tumblr.com/tracheotomy/1">Page 1</a> </div>
</p>
</div>
</div>
<div class="square3">
<p style="text-align:left; font-size:.9em; font-family:'Courier New'; margin-top: 150px; margin-left:3%;">
</div>
</body>
</html>
uj5u.com熱心網友回復：
試試這個，用類專案包裝你的文本，或者你可以從這個片段中探索。
.container {
border: 2px solid #ccc;
padding: 10px;
width: 30em;
}
.item {
width: -moz-fit-content;
width: fit-content;
background-color: #8ca0ff;
padding: 5px;
margin-bottom: 1em;
}<div class="container">
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>
<div class="item">
Item with more text in it, hopefully we have added enough text so the text
will start to wrap.
in it, hopefully we have added enough text so the text
will start to wrap.
in it, hopefully we have added enough text so the text
will start to wrap.
in it, hopefully we have added enough text so the text
will start to wrap.
in it, hopefully we have added enough text so the text
will start to wrap.
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/519359.html
標籤：htmlcssCSS网格
下一篇：從API獲取產品詳細資訊時出錯