我希望有一個帶有側邊欄和主要部分的非常簡單的布局。
我希望側邊欄根據內容調整其寬度，但只能調整到某個點，因此不會將主要內容推離頁面，如果寬度受到限制，我只想省略文本。我試圖通過使用來做到這一點fit-content(20%)，但它不會限制側邊欄的大小。
我
有誰知道我該怎么做？
body {
height: 50%;
width: 50%;
padding: 5px;
border: purple solid 1px;
}
#container {
height: 100%;
width: 100%;
overflow: hidden;
display: grid;
grid-template-columns: fit-content(20%) 1fr;
border: red solid 1px;
padding: 5px;
}
#sidebar {
/* width: 700px; */
border: green solid 1px;
}
#item {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
</head>
<body>
<div id="container">
<div id="sidebar">
<div id="item">
some long long long long long text text text here here here
</div>
</div>
<div id="main">
<div>Main content</div>
</div>
</div>
</body>
</html>uj5u.com熱心網友回復：
將此添加到您的代碼中：
* {
box-sizing: border-box;
}
#sidebar {
min-width: 0;
}
min-width: 0是否可以防止稱為“網格井噴”的東西，這會#container忽略其給定的寬度并從其容器中戳出。
在此處閱讀更多相關資訊。
要應用我們的修復，我們需要確保列具有明確的最小寬度而不是 auto。
所以我們給網格項一個明確的min_width，0在我們的例子中就是這樣。
由于其父級的填充，還box-sizing: border-box可以防止#container戳出。body這意味著元素通過其邊框計算其寬度，包括填充。
* {
box-sizing: border-box;
}
body {
height: 50%;
width: 50%;
padding: 5px;
border: purple solid 1px;
}
#container {
height: 100%;
width: 100%;
overflow: hidden;
display: grid;
grid-template-columns: fit-content(20%) 1fr;
border: red solid 1px;
padding: 5px;
}
#sidebar {
/* width: 700px; */
min-width: 0;
border: green solid 1px;
}
#item {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
</head>
<body>
<div id="container">
<div id="sidebar">
<div id="item">
some long long long long long text text text here here here
</div>
</div>
<div id="main">
<div>Main content</div>
</div>
</body>
</html>我希望這是你想要的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/421170.html
標籤：