Question

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

结果应该是这样的：

但到目前为止，结果是其中一个看起来不像其他2个甚至用所有3的css相同

任何想法？我也在使用本网站的bootstrap模板

codon_seq
   Triplet Amino_Acid Fraction Freq_1k Number
1      AAA          K     0.50    19.6      1
2      AAG          K     0.50    19.6      1
3      AAT          N     1.00    19.6      1
4      ACC          T     0.30    58.8      3
5      ACG          T     0.20    39.2      2
6      ACT          T     0.50    98.0      5
7      AGT          S     0.33    58.8      3
8      ATA          I     0.50    19.6      1
9      ATT          I     0.50    19.6      1
10     CAC          H     0.50    19.6      1
11     CAT          H     0.50    19.6      1
…

#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;
}

Answer 1

将你的sectons包装在div中

       <div style="display: flex;">

应该解决你的问题。但我对它做了更多修改，以使其也具有响应性。这样你就不需要硬编码宽度和边距。

＆＃13;

#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;
    }

＆＃13;

           <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>

＆＃13;

Answer 2

如果您使用的是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;

}

用空间建立相等的列

2 个答案: