gpt4 book ai didi

html - 用空间 build 等柱

转载 作者:行者123 更新时间:2023-11-28 02:31:04 29 4
gpt4 key购买 nike

我试图在不使用 html 5 中的表选项的情况下构建 3 个相等的列

结果应该是这样的:

enter image description here

但到目前为止,结果是其中一个看起来不像另外两个,即使所有 3 个都使用相同的 css

enter image description here

有什么想法吗?我也在为这个网站使用 Bootstrap 模板

#refGan {
display: inline-block;
width: 193px;
background-color: #F2F2F2;
height: 378px;
margin-right: 90px;
}

#refGan img {
margin-left: auto;
margin-right: auto;
display: block;
margin-bottom: 20px;
}

#refGan h3 {
font-family: Miso;
text-align: center;
color: #A53D3E;
font-weight: bold;
}

#refGan hr {
width: 30px;
position: center;
color: #f00;
background-color: #A53D3E;
height: 5px;
}

#refGan p {
font-family: 'Varela Round', sans-serif;
font-size: 15px;
color: black;
}

#refGan label {
float: left;
background: url(../pictures/button.png);
background-repeat: no-repeat;
background-size: 129px 30px;
font-size: 12px;
}
<section id="refGan">
<h3>רומנטיקה</h3>
<hr>
<div><img src="pictures/romantic anime.jpg" width="173" height="99" /></div>
<p>
זה בדיוק איך שזה נשמע. בסדרות מסוג זה העלילה היא סביב זוג שמתאהבים. הז'אנר הזה מאוד פופולארי בקרב נערות צעירות וביפנית יש לו שם מיוחד: "שוג'ו".
</p>
<label>
לסדרות מומלצות
</label>
</section>
<section id="refGan">
<h3>
אקשן
</h3>
<hr>
<div><img src="pictures/action anime.jpg" width="173" height="99" /></div>
<p>
ז'אנר קלאסי שמשלב בדרך כלל אומנויות לחימה וגיבור מרכזי אחד. הז'אנר הזה מאוד פופולארי בקרב נערים צעירים וביפנית יש לו שם מיוחד: "שונן".
</p>
<label>
לסדרות מומלצות
</label>
</section>
<section id="refGan" class="marcoCol">
<h3>הרפתקאות</h3>
<hr>
<div><img src="pictures/adventure anime.jpg" width="173" height="99" /></div>
<p>
הז'אנר המוכר מכולם! הוא אפילו חדר למדינות מעבר ליפן. כולל בתוכו סדרות כמו: הלב (מרקו) ונילס הולגרסון. מה שמאפיין אותו, כמובן, זה ההרפתקאות של הגיבור הראשי.
</p>
<label>
לסדרות מומלצות
</label>
</section>

最佳答案

将你的部分包裹在一个 div 中

       <div style="display: flex;">

应该可以解决您的问题。但是我对它进行了更多更改以使其也具有响应能力。这样您就不需要对宽度和边距进行硬编码。

#refGan {
display: inline-block;
width: 30%;
background-color: #F2F2F2;
height: 378px;
}

#refGan img {
margin-left: auto;
margin-right: auto;
display: block;
margin-bottom:20px;
}

#refGan h3 {
font-family: Miso;
text-align: center;
color: #A53D3E;
font-weight: bold;
}
#refGan hr {
width: 30px;
position: center;
color: #f00;
background-color: #A53D3E;
height: 5px;
}
#refGan p {
font-family: 'Varela Round', sans-serif;
font-size: 15px;
color: black;
}

#refGan label {
float: left;
background: url(../pictures/button.png);
background-repeat: no-repeat;
background-size: 129px 30px;
font-size: 12px;
}
           <div style="display: flex;justify-content: space-around;">
<section id="refGan">
<h3>רומנטיקה</h3>
<hr>
<div><img src="pictures/romantic anime.jpg" width="173" height="99" /></div>
<p>
זה בדיוק איך שזה נשמע. בסדרות מסוג זה העלילה היא סביב זוג שמתאהבים. הז'אנר הזה מאוד פופולארי בקרב נערות צעירות וביפנית יש לו שם מיוחד: "שוג'ו".
</p>
<label>
לסדרות מומלצות
</label>

</section>
<section id="refGan">
<h3>
אקשן
</h3>
<hr>
<div><img src="pictures/action anime.jpg" width="173" height="99" /></div>
<p>
ז'אנר קלאסי שמשלב בדרך כלל אומנויות לחימה וגיבור מרכזי אחד. הז'אנר הזה מאוד פופולארי בקרב נערים צעירים וביפנית יש לו שם מיוחד: "שונן".
</p>
<label>
לסדרות מומלצות
</label>
</section>
<section id="refGan" class="marcoCol">
<h3>הרפתקאות</h3>
<hr>
<div><img src="pictures/adventure anime.jpg" width="173" height="99" /></div>
<p>
הז'אנר המוכר מכולם! הוא אפילו חדר למדינות מעבר ליפן. כולל בתוכו סדרות כמו: הלב (מרקו) ונילס הולגרסון. מה שמאפיין אותו, כמובן, זה ההרפתקאות של הגיבור הראשי.
</p>
<label>
לסדרות מומלצות
</label>
</section>
</div>

关于html - 用空间 build 等柱,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50775576/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com