使用空间构建相等的列
使用空间构建相等的列
提问于 2018-06-09 22:59:07
我正在尝试在不使用html 5中的table选项的情况下构建3个相等的列。
结果应该是这样：
但到目前为止，结果是其中一个看起来不像其他两个，即使所有三个都有相同的css
有什么想法吗？我也在使用这个网站的引导模板
#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>
回答 2
Stack Overflow用户
发布于 2018-06-09 23:18:55
将sectons包装在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>
Stack Overflow用户
发布于 2018-06-09 23:38:35
如果您使用的是bootstrap，请将html代码替换为
<div class="container">
<section id="refGan" class="float-left col-xs-12 col-lg-4">
<h3>רומנטיקה</h3>
<hr>
<div><img src="pictures/romantic anime.jpg" width="173" height="99" /></div>
<p>
זה בדיוק איך שזה נשמע. בסדרות מסוג זה העלילה היא סביב זוג שמתאהבים. הז'אנר הזה מאוד פופולארי בקרב נערות צעירות וביפנית יש לו שם מיוחד: "שוג'ו".
</p>
<label>
לסדרות מומלצות
</label>
</section>
<section id="refGan" class="float-left col-xs-12 col-lg-4">
<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 float-left col-xs-12 col-lg-4">
<h3>הרפתקאות</h3>
<hr>
<div><img src="pictures/adventure anime.jpg" width="173" height="99" /></div>
<p>
הז'אנר המוכר מכולם! הוא אפילו חדר למדינות מעבר ליפן. כולל בתוכו סדרות כמו: הלב (מרקו) ונילס הולגרסון. מה שמאפיין אותו, כמובן, זה ההרפתקאות של הגיבור הראשי.
</p>
<label>
לסדרות מומלצות
</label>
</section>
</div>并删除此css代码：
#refGan {
float: left;
width: 25%;
background-color: #F2F2F2;
height: 478px;
margin: 50px;}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50775576
复制相关文章
相似问题