html - 用空间 build 等柱

Question

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

结果应该是这样的:

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

有什么想法吗？我也在为这个网站使用 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>

Answer 1

将你的部分包裹在一个 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>