我的問題是我想在 html/CSS 中創建代碼，只要我最小化瀏覽器視窗，它就會自動調整網站（塊 內容）。 例如，當我最小化瀏覽器視窗時，我在創建的塊中遇到了文本溢位問題。
我希望塊元素適應我的內容的長度。
問題 塊元素中存在文本溢位，我將其標記為具有實心邊框樣式的綠色塊。
我試過 確定我可以用溢位來解決它：自動；但這是一個丑陋的解決方案。
我希望 塊自行調整到文本的長度，反之亦然
.p1 {
background-color: green;
border-style: solid;
float: left;
width: auto;
height: 100px;
}
.block {
display: block;
width: 180px;
}<header>
<h1>Title</h1>
<nav></nav>
</header>
<main>
<article class="p1">
<div class="block">
<h4>Paragraph I</h4>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
</p>
</div>
</article>
</main>
<footer></footer>uj5u.com熱心網友回復：
我不是 100% 確定您是否希望綠色塊的寬度適合瀏覽器視窗或高度，但是... 塊級元素，如<article>or<div>將占據全屏寬度并自動調整其高度以適應內容，因此最簡單要做的就是不要在你的 CSS 中定義這些屬性
標記的更改如下。如果這不完全是您想要實作的目標，請在評論中告訴我，我會進行調整。
祝你的 CSS 之旅好運
.p1 {
background-color: green;
border-style: solid;
/* float: left; <--- if you're looking to make this block fit the width of the chile elements then it's better to use width: fit-content; */
width: fit-content;
/* width: auto; <--- you don't need this because the default is 'auto' */
/* height: 100px; <-- take this out and the height of your block will be set to the height of the content */
}
.block {
/* display: block; <--- you don't need this as a div is, by default, a block element */
width: 180px;
}<header>
<h1>Title</h1>
<nav></nav>
</header>
<main>
<article class="p1">
<div class="block">
<h4>Paragraph I</h4>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
</p>
</div>
</article>
</main>
<footer></footer>uj5u.com熱心網友回復：
不要給出靜態高度，否則會忽略內容高度，而寬度 fit-content 會確保取您內容的寬度：
.p1 {
background-color: green;
border-style: solid;
float: left;
width: fit-content;
}
uj5u.com熱心網友回復：
我得到了解決方案，伙計們（你們大多數人可能已經知道了） ，但也許你有一個更清潔的解決方案
.block {
background-color: green;
border-style: solid;
float:left;
width: fit-content;
display: flex;
margin-left: 100px;
margin-right: 100px;
}
.p1 {
display: flex;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="descrption" content="übung zu Aufgabe 17.6">
<meta name="keywords" content="ansprechend, hintergrund, html, css">
<link rel="stylesheet" href="style.css">
<title>Iran</title>
</head>
<body>
<header>
<nav></nav>
<h1>Title</h1>
</header>
<main>
<article class="block">
<div class="p1">
<h4>Paragraph I</h4>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies
nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel,
aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
</p></div></article>
</main>
<footer></footer>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/530749.html
標籤：htmlcss
上一篇：谷歌聯系表格影片？