我正在嘗試修改我網站的各個部分，并且我想要的東西已經完成了一半，除非每當我嘗試添加另一個元素時，由于某種原因尺寸會中斷，所以應該是兩個大盒子，變成兩個小盒子帶有重疊文本的框
單個元素的外觀
兩個元素的外觀
影像我編輯了影像以顯示我想要完成的事情
之前有人告訴我，它與 line-height 有關，但是除了文本不再剪切之外，與 line-height 混淆并沒有太大變化，但大小變化仍然是一個問題
我希望它們都具有特定的大小，獨立于它們附近是否有另一個元素，如果我將 .headercontainer 寬度保留為 100%，則單個元素背景會延伸到整個頁面，這是我不想要的，這就是我要說的
這是我的頁面CSS代碼：
.headercontainer {
display: flex;
height: 5%;
width: 46%;
margin: auto;
}
div.wrapper {
flex: 1;
border: 1px solid white;
margin: 0.50%;
}
.headerpfp {
float: left;
margin-left: 1%;
margin-top: 1%;
margin-right: 1%
}
.posttext {
text-align: left;
margin-left: 1%;
margin-top: -0.35%;
}
.headtext {
margin-top: 3.00%;
color: lime;
text-align: left;
}
和 HTML 代碼：
<div class="headercontainer">
<div class="wrapper" style="background-image:url(../../images/quakebackgrounds/sitebackground03.png);background-size:cover;float:left;">
<a href="../../blog/essays/pages/Early2000sInternet.html">
<img src="../../blog/images/PFPs/JuneSSaiPFP.png" style="border:1px solid white;" class="headerpfp">
<h2 class="headtext">The Early and Mid 2000's Internet</h2></a>
<p style="text-align:left;">Posted August 7, 2022</p>
<p style="text-align:left;">Written By June S. Sai</p>
<br>
<br>
<p class="posttext">There was no bigger joy than sending your</p>
<p class="posttext">friends DooM wads on Skype and playing deathmatch</p>
<p class="posttext">while voicecalling all day long, good times.</p>
</div>
<div class="wrapper" style="background-image:url(../../images/quakebackgrounds/sitebackground03.png);background-size:cover;float:right;">
<a href="../../blog/essays/pages/Early2000sInternet.html">
<img src="../../blog/images/PFPs/JuneSSaiPFP.png" style="border:1px solid white;" class="headerpfp">
<h2 class="headtext">The Early and Mid 2000's Internet</h2></a>
<p style="text-align:left;">Posted August 7, 2022</p>
<p style="text-align:left;">Written By June S. Sai</p>
<br>
<br>
<p class="posttext">There was no bigger joy than sending your</p>
<p class="posttext">friends DooM wads on Skype and playing deathmatch</p>
<p class="posttext">while voicecalling all day long, good times.</p>
</div>
</div>
這也是我的 style.css 檔案：https ://junessai.net/style.css
uj5u.com熱心網友回復：
在 CSS 中更改.headercontainerfrom46%的寬度100%
.headercontainer {
display: flex;
height: 5%;
width: 100%;
margin: auto;
}
div.wrapper {
flex: 1;
border: 1px solid white;
margin: 0.50%;
}
.headerpfp {
float: left;
margin-left: 1%;
margin-top: 1%;
margin-right: 1%
}
.posttext {
text-align: left;
margin-left: 1%;
margin-top: -0.35%;
}
.headtext {
margin-top: 3.00%;
color: lime;
text-align: left;
}<div class="headercontainer">
<div class="wrapper" style="background-image:url(../../images/quakebackgrounds/sitebackground03.png);background-size:cover;float:left;">
<a href="../../blog/essays/pages/Early2000sInternet.html">
<img src="../../blog/images/PFPs/JuneSSaiPFP.png" style="border:1px solid white;" class="headerpfp">
<h2 class="headtext">The Early and Mid 2000's Internet</h2></a>
<p style="text-align:left;">Posted August 7, 2022</p>
<p style="text-align:left;">Written By June S. Sai</p>
<br>
<br>
<p class="posttext">There was no bigger joy than sending your</p>
<p class="posttext">friends DooM wads on Skype and playing deathmatch</p>
<p class="posttext">while voicecalling all day long, good times.</p>
</div>
<div class="wrapper" style="background-image:url(../../images/quakebackgrounds/sitebackground03.png);background-size:cover;float:right;">
<a href="../../blog/essays/pages/Early2000sInternet.html">
<img src="../../blog/images/PFPs/JuneSSaiPFP.png" style="border:1px solid white;" class="headerpfp">
<h2 class="headtext">The Early and Mid 2000's Internet</h2></a>
<p style="text-align:left;">Posted August 7, 2022</p>
<p style="text-align:left;">Written By June S. Sai</p>
<br>
<br>
<p class="posttext">There was no bigger joy than sending your</p>
<p class="posttext">friends DooM wads on Skype and playing deathmatch</p>
<p class="posttext">while voicecalling all day long, good times.</p>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/506646.html
上一篇：比Js中的bug更重要