1

タイトルが示すように、同じ高さになるには2つのdivが必要です。コンテンツを収めるために必要な高さである必要があります。現在のCSSは次のとおりです。

.portfolioleft{
    float:left;
    width:189px;
    background-color: #436FAC;
    min-height: 100px;
    height: auto;
    color: #FFF;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
}
.portfolioleft img{
    border-radius: 10px;
}
.portfolioright{
    float:right;
    width:500px;
    background-color: #436FAC;
    min-height: 100px;
    height: auto;
    color: #FFF;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
}
.portfolioright a{
    color:#FFFFFF;
}

divのhtmlは次のとおりです。

<div class="portfolioleft"><img src="img" alt="img" width="189" height="311" /></div>
<div class="portfolioright">
<h2>Title</h2>
<p>Text</p>
</div>
<div class="clear">&nbsp;</div>
4

3 に答える 3

1

CSSだけでは、この偉業に取り組むことはできません（画像を使用できるハックソリューションが必要な場合を除く）。JSソリューションを実装する必要があります。コンテンツは動的であり、列の高さがわからないため、DOMにアクセスして最も高い列の高さを決定し、指定された列に適用する必要があります。私は以下を定期的に使用していますが、非常にうまく機能し、実装も簡単です。

http://www.jainaewen.com/files/javascript/jquery/equal-height-columns.html

于 2012-04-19T19:11:15.893 に答える
0

左右のdivのセルのプロパティ

コードを確認し、フロートを表示テーブルセルに置き換えました

このライブhttp://jsfiddle.net/rohitazad/prMLh/1/を確認できます

于 2012-04-20T07:27:28.410 に答える
0

残念ながら、これはCSSでは難しい問題です。左側のサイドバーの背景色をセクションの下部（右側のdivで定義された高さ）まで拡張するだけの場合は、親のdiv（右側のdivの高さに合わせて拡大縮小）内でそれらをラップしてみてください。左のdivをposition：absoluteと100％の高さで次のように配置します。

<div class="portfolio">
  <div class="portfolioleft">...</div>
  <div class="portfolioright">...</div>
</div>

.portfolio {
  position: relative;
  background: white;
}

.portfolio .portfolioleft {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 100%;
  background: #436FAC;
}

.portfolio .portfolioright {
  margin-left: 200px;
}

両方の側面が動的であり、両方の高さを一致させる必要がある場合、すべての主要なブラウザーでそれを機能させる唯一の確実な方法は、2列のテーブルベースのレイアウトに頼ることです。

于 2012-04-19T18:51:29.460 に答える