Question

我正在尝试用代码重新创建一个网站，以查看我是否仍然记得HTML和CSS，但是我被困在某个位置。当我尝试制作一个三列的砌块时，我注意到左边的第一个砌块与其他两个砌块的高度不同。

我希望最下面的方块看起来像三个最上面的方块。

我的HTML代码如下

#tabThree {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;
  text-align: center;
}
.reviews {
  position: relative;
  text-align: center;
  color: blackl;
  padding: 30px;
  width: 100%;
}

.review_boxes {
  font-size: 20px;
  list-style: none;
  display: inline-block;
  padding: 0px 30px;
  margin: 10px;
  background-color: white;
  border: 2px solid lightgrey;
  width: 25%;
  text-align: center;
}

<div class="reviews">
    <h1>Customer Reviews</h1>
      <ul id="tabThree">

        <li class="review_boxes">
          <h1>C.F., Mardela Springs</h1>
          <p>"Very easy to work with and worked quickly
            and efficiently"</p>
        </li>

        <li class="review_boxes">
          <h1>Bruce Mear</h1>
          <p>"G and Brothers Roofing does work for my company. Bruce Mears, Designer/Builder. I highly recommend them!!!"</p>
        </li>

        <li class="review_boxes">
          <h1>Michele Orlen</h1>
          <p>"Great work and very efficient - on top of them job - would highly recommend!!"</p>
        </li>
      </ul>
  </div>

我尝试设置积木的高度，但是我可能也做错了一些我看不清的错误。

Answer 1

第一个高度较小，因为<p>标签仅包含一行文本。所以你可以

1.设置容器的绝对高度。
2。将<h1>s和<p>s包裹在容器中，并设置这些容器的高度。

Answer 2

将display: flex;添加到您的ID #tabThree中。

Answer 3

这真的很奇怪... 每当我做这样的事情时，我都会使用CSS网格：P 它可能不是最佳选择，但对我来说真的很好

<div class="reviews">
<h1>Customer Reviews</h1>
  <section class="grid">

    <div class="review_boxes">
      <h1>C.F., Mardela Springs</h1>
      <p>"Very easy to work with and worked quickly
        and efficiently"</p>
    </div>

    <div class="review_boxes">
      <h1>Bruce Mear</h1>
      <p>"G and Brothers Roofing does work for my company. Bruce Mears, Designer/Builder. I highly recommend them!!!"</p>
    </div>

    <div class="review_boxes">
      <h1>Michele Orlen</h1>
      <p>"Great work and very efficient - on top of them job - would highly recommend!!"</p>
    </div>
  </section>

<style>
.reviews {
  position: relative;
  text-align: center;
  color: blackl;
  padding: 30px;
  width: 100%;
}

.review_boxes {
  font-size: 20px;
  list-style: none;
  display: inline-block;
  padding: 0px 30px;
  margin: 10px;
  background-color: white;
  border: 2px solid lightgrey;
  width: 80%;
  text-align: center;
}
.grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
</style>

Answer 4

您还可以在第一个框中添加一个空的<p>以获取多余的行。这样可以使盒子都具有相同的高度，但那不是那么干净。

盒子的大小不一样

4 个答案: