css - 3 列のリキッド レイアウト

Question

私はこのウェブサイトに取り組んでいますが、列に問題があります。現在、各列の周りに境界線があり、これが私が望む効果です。しかし、私はそれらが同じ高さであることを望んでいます。柱が最も高い高さを取ることは理解していますが、とにかくそれらを同じに保つためにそこにあります。各列の周りにコンテナを個別に配置しようとしましたが、うまく動作しませんでした。これを達成する方法の提案はありますか?

ここにサイトがあります: http://www.pitt.edu/~mkm49/1052/liquid.html

Answer 1

「clearfix」が必要です...すべての列の後に..このように...

<div class="clearfix"></div>

.clearfix { クリア: 両方; }

ここで、あるテーマについて詳しく知ることができます「clearfix」のどの方法を使用できますか?

Answer 2

1か月前に同じ問題を抱えていたので、そこに答えがあります...答えは次のとおりです。

CSS部分

  .col {
   float:left;
   margin-left:3%;
   width:20%;
   height:300px;
   border-radius:10px;
   border-style:solid;
   border-width:5px
   }

HTML部分

  <div class="col">
    <p>Lorem...</p>
  </div

  <div class="col">
    <p>Lorem...</p>
  </div

  <div class="col">
    <p>Lorem...</p>
  </div

私が使っていたので動作するはずです^_^