0

こんにちは、画像が入っている左の列のように、右の列を同じ高さに設定できないかどうか疑問に思っています。高さが固定されていないものすべて？

フィドル: http://jsfiddle.net/GWZuq/3/

ここに画像の説明を入力

私のHTML：

<div class="wrapper">
    <div class="left_col"><img src="http://www.monstersandcritics.de/image.php?file=downloads/downloads/musik/zaschamoktanstateofmind_1/images/group1/Zascha-Moktan-State-Of-Mind_201128_248803_1_024.jpg&width=600"></div>
    <div class="right_col">some text ul etc</div>

</div>

私のCSS：

.wrapper{
    width:80%;
}
.left_col{
    position:relative;
    width:80%;
    float:left;
}
.left_col img{
    position:relative;
    width:100%;
    height:auto;
}
.right_col{
    position:relative;
    width:20%;
    float:left;
    background-color:pink;
    height:100%; /* why is this not putting right col to 100% of the parent container?
}

どうもありがとう！

4

3 に答える 3

3

CSSを次のCSSに置き換えるだけです（例）。

.wrapper {
    width:80%;
    overflow:hidden;
}
.left_col {
    width:80%;
    float:left;
    padding-bottom:10000px;
    margin-bottom:-10000px;
}
.left_col img {
    display:block;
    width:100%;
    height:auto;
}
.right_col {
    width:20%;
    float:left;
    background-color:pink;
    padding-bottom:10000px;
    margin-bottom:-10000px;
}

代替ソリューション

<figure>または、使用するHTMLとCSSを変更することもできます<figcaption>（例）。このソリューションでは、垂直方向の位置合わせも可能です。

HTML

<figure class="wrapper">
 <img src="http://www.monstersandcritics.de/image.php?file=downloads/downloads/musik/zaschamoktanstateofmind_1/images/group1/Zascha-Moktan-State-Of-Mind_201128_248803_1_024.jpg&width=600"><!-- Comment out white space
 --><figcaption>some text ul etc</figcaption>
</figure>

CSS

figure.wrapper {
    width:80%;
    overflow:hidden;
    background:pink;
}
figure.wrapper img {
    width:80%;
    display:inline-block;
    height:auto;
    vertical-align:middle; /* top, bottom, or middle to align image vertically */
}
figure.wrapper figcaption {
    width:20%;
    display:inline-block;
    vertical-align:middle; /* top, bottom, or middle to align caption vertically */
}

注：このソリューションでは、JavaScriptを介して登録しない限り、IE8以下では機能しない新しい要素を使用します。これは、html5shiv（Google Code、GitHub）を含めることで克服できます。

于 2012-07-05T14:59:01.720 に答える
1

高さ (または上下の絶対配置) を使用する場合は、親の高さを定義する必要があります。

親コンテナに高さを割り当てる必要があります。

  • 明示的に高さを与えることによって
  • または、絶対配置と上下の指定
于 2012-07-05T14:54:13.433 に答える
0

両方の高さを 50% に設定する必要があります

于 2012-07-05T14:54:26.493 に答える