Saya mencoba membuat kolom dalam HTML dan css tanpa menggunakan kisi, flexbox, atau apa pun yang mewah. Tapi ketinggian kolom individu tampak meningkat saat mereka bergerak dari kiri ke kanan dan juga sepertinya isi kolom ketiga memakan lebih banyak ruang.

Saya sudah mencoba mengatur ketinggian tertentu ke kolom tetapi tidak berfungsi dengan baik.

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

Ketiga kolom tersebut harus memiliki tinggi yang sama dan menempati ruang yang sama.

1
stealth225 13 Agustus 2019, 17:53

1 menjawab

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

Anda harus menggunakan tipe tabel tampilan. tetapi Anda akan dapat mencapai .col semua pada ketinggian yang sama

1
Kareem Dabbeet 13 Agustus 2019, 17:12