html - 浮动 div 给出不同高度的列

Question

我试图在不使用网格、flexbox 或任何花哨的东西的情况下用 HTML 和 css 制作列。但是各个列的高度似乎随着从左到右而增加，而且似乎第三列的内容占用了更多空间。

我尝试为列设置特定的高度，但它们效果不佳。

#exhibit {
  width: 100%;
  height: 600px;
}

.col {
  width: 33.3%;
  font-size: 1.2em;
  float: left;
  font-family: sans-serif;
  overflow: hidden;
}

.smol-round {
  display: block;
  border-radius: 50%;
  border-style: solid;
  border-color: #048eaa;
  border-width: 3px;
}

<section id="exhibit">
  <!--second block of pics and paras-->

  <div class="col">
    <h3>How To Dog</h3>
    <image class="smol-round" src="images/dog2-sq.jpg" alt="a pic of a sweet doggo"></image>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita qui at modi ipsa ea obcaecati rerum nam iusto, velit suscipit delectus ullam eum dolores nostrum inventore reprehenderit accusamus sapiente libero. Lorem ipsum, dolor sit amet consectetur
    adipisicing elit. Nesciunt, consequuntur exercitationem unde commodi sapiente quae itaque dolorem accusantium at fugit et nostrum praesentium assumenda ducimus. Quo porro accusantium deleniti expedita.<br>
    <button>How</button>
  </div>
  <div class="col ">
    <h3>What Is Dogs</h3>
    <image class="smol-round" src="images/dog3-sq.jpg" alt="a pic of a sweet doggo"></image>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque culpa hic temporibus, nihil est perspiciatis excepturi odio omnis reprehenderit, facilis quae repudiandae a expedita molestiae ullam recusandae accusamus aperiam alias. Lorem ipsum dolor
    sit amet consectetur adipisicing elit. Deserunt debitis nulla doloremque corporis quam quidem sequi itaque, deleniti, eum perspiciatis reiciendis, ipsum illo maiores. Ducimus quae explicabo aperiam laudantium. Necessitatibus.
    <br>
    <button>What</button>
  </div>
  <div class="col">
    <h3>Facts From Dogs</h3>
    <image class="smol-round" src="images/dog4-sq.jpg" alt="a pic of a sweet doggo"></image>
    Lorem ipsum the third dolor sit amet consectetur adipisicing elit. Quia a quod ea id nostrum quas, et dolore ad necessitatibus nam amet libero vitae vero aspernatur consequatur at iusto, mollitia quis. Lorem ipsum dolor sit amet consectetur adipisicing
    elit. Perspiciatis unde officia harum repellat sequi necessitatibus nulla at nobis aliquid ratione velit provident corrupti facere impedit eius eum hic, aspernatur eveniet.
    <br>
    <button>Facts</button>
  </div>


</section>

三列应具有相同的高度并占据相同的空间。

标签： htmlcss

Answer 1

#exhibit {
  height: 600px;
  display: table;
  width: 100%;
}

.col {
  font-size: 1.2em;
  font-family: sans-serif;
  overflow: hidden;
  display: table-cell;
  background-color: red;
}

.smol-round {
  display: block;
  border-radius: 50%;
  border-style: solid;
  border-color: #048eaa;
  border-width: 3px;
}

<section id="exhibit">
  <!--second block of pics and paras-->

  <div class="col">
    <h3>How To Dog</h3>
    <image class="smol-round" src="images/dog2-sq.jpg" alt="a pic of a sweet doggo"></image>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita qui at modi ipsa ea obcaecati rerum nam iusto, velit suscipit delectus ullam eum dolores nostrum inventore reprehenderit accusamus sapiente libero. Lorem ipsum, dolor sit amet consectetur
    adipisicing elit. Nesciunt, consequuntur exercitationem unde commodi sapiente quae itaque dolorem accusantium at fugit et nostrum praesentium assumenda ducimus. Quo porro accusantium deleniti expedita.<br>
    <button>How</button>
  </div>
  <div class="col ">
    <h3>What Is Dogs</h3>
    <image class="smol-round" src="images/dog3-sq.jpg" alt="a pic of a sweet doggo"></image>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque culpa hic temporibus, nihil est perspiciatis excepturi odio omnis reprehenderit, facilis quae repudiandae a expedita molestiae ullam recusandae accusamus aperiam alias. Lorem ipsum dolor
    sit amet consectetur adipisicing elit. Deserunt debitis nulla doloremque corporis quam quidem sequi itaque, deleniti, eum perspiciatis reiciendis, ipsum illo maiores. Ducimus quae explicabo aperiam laudantium. Necessitatibus.
    <br>
    <button>What</button>
  </div>
  <div class="col">
    <h3>Facts From Dogs</h3>
    <image class="smol-round" src="images/dog4-sq.jpg" alt="a pic of a sweet doggo"></image>
    Lorem ipsum the third dolor sit amet consectetur adipisicing elit. Quia a quod ea id nostrum quas, et dolore ad necessitatibus nam amet libero vitae vero aspernatur consequatur at iusto, mollitia quis. Lorem ipsum dolor sit amet consectetur adipisicing
    elit. Perspiciatis unde officia harum repellat sequi necessitatibus nulla at nobis aliquid ratione velit provident corrupti facere impedit eius eum hic, aspernatur eveniet.
    <br>
    <button>Facts</button>
  </div>


</section>

您必须使用显示表类型。但是您将能够在相同的高度上实现 .col