浮动div给出不同高度的列

Question

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

我尝试为列设置一个特定的高度，但它们不能很好地工作。

​

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

​

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

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