1

ボックスの高さを画像の高さと同じに保つ必要があります。子猫（例）の画像の高さが398ピクセルの場合、divの高さは同じでなければなりません。
問題は、.item div内の他の子divが、親divを約で展開することです。150px。

この動作を停止するにはどうすればよいですか？
私はoverflow：hidden / autoなどの他のいくつかの方法を試しましたが、何もうまくいきませんでした。
助けが必要です！:)

HTML：

<div id="container">
    <div class="item">
        <img src="http://placekitten.com/g/398/398" />
        <div class="box">
            <span id="header-content">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr
            </span>
        </div>
        <div class="headlineblog"><h1>Headline</h1></div>
        <div class="cat"><h2>Category</h2></div>
    </div>
</div>​

CSS：

#container {}
.item {width: 398px;float:left;margin: 10px;overflow: hidden !important;}
.item > img {width: 398px !important}
.item .box {background-color: white;
margin: 10px;
height: 65px;
position: relative;
top: -110px;
font-size: 14px;
color: #BBBDBE;
min-height: 65px;
padding: 10px;
width: 358px;

}
.cat {position: relative;left: 280px;bottom: 230px;}
.cat h2 a{font-size: 14px;text-transform: uppercase;font-weight: 300;color: #FF6400}
.headlineblog {position: relative;left: 20px;bottom: 195px;}
.headlineblog h1 a{font-size: 18px; color: black; font-weight: 700}
.item .box #header-content { position: absolute; bottom: 10px;font-size: 14px;font-weight: 300;color: grey;width: 310px;text-overflow: ellipsis;overflow: hidden;-o-text-overflow: ellipsis;white-space: nowrap; }​

ライブデモ

4

2 に答える 2

1

私が何かを逃したかどうかはわかりませんが、私はこのようにします：

div.itemこの場合の位置属性である親コンテナにposition: relative;

これで、親コンテナ内に「ホワイトボックス」を位置属性で配置できます。親コンテナposition: absolute;の下部に配置するにはbottom: 5px;（または適切な別の番号）ホワイトボックスを上部に配置する場合は、次のようなものを使用しますtop: 5px;

「ホワイトボックス」内に要素を絶対的に配置する理由はわかりません。私の意見では、フロートを使用する方がはるかに明確です。とにかく、ここにコードがあります：

マークアップ：

<div id="container">
    <div class="item">
        <img src="http://placekitten.com/g/398/398">
        <div class="box">
            <div class="top">
                <span class="headlineblog"><h1>Headline</h1></span>
                <span class="cat"><h2>Category</h2></span>                
            </div>
            <span class="header-content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</span>
        </div>
    </div>
</div>​

スタイル：

#container {}

.item {
    position: relative;
    margin: 10px;
}
.item img { 
    width: 398px;
}

.item .box {
    position: absolute;
    bottom: 10px;    
    height: 65px;
    width: 358px;
    margin: 10px;
    padding: 10px;
    background-color: white;    
}

.item .box .top {
    /* clear the floating elements */
    overflow: hidden;
    margin: 0 0 5px 0;
}

.item .box .headlineblog {
    float: left;
}

.item .box .cat {
    float: right;
}

​.​item .box .header-content {
    color: grey;
}​

jsfiddle：デモ

これが選択肢にない場合は、その理由を説明してください。

于 2012-08-29T17:02:23.610 に答える
1

を設定し、必要な子を設定.itemして、上下の位置を少し調整することができます。position: relativeposition: absolute

于 2012-08-29T16:07:29.327 に答える