0

大きな正方形のように見える div と、その div 内の値を示す子 div がある場合、他の div が上部で消費するスペースに関係なく、これらの div の 1 つを下部に表示するにはどうすればよいですか。それが理にかなっていることを願っています....

たとえば、ここにフィドルがあります...子3を親divの要素のようなタイルの1つにしないでください。フィドルの例

html:

<div id='parent'>

    <div id='child1' class='each-element'>Child 1</div>
    <div id='child2' class='each-element'>Child 2</div>
    <div id='child3' class='each-element'>Child 3</div>
</div>

CSS

#parent{
    min-height:300px;
    max-height:310px;
    height:300px;
    background-color:#e0e0e0;
    width:400px;
    padding:1%;
}

div.each-element{
    border:2px solid #2d2d2d;
    text-align:center;
    font-family:'segoe ui';
    margin:2%;
    padding:1%;
}

#child3{
    padding:0;
    border:none;
    margin:0

}
4

2 に答える 2

1

基本的に、親 div の位置を相対位置に設定してから、子 3 div の位置を絶対位置に設定します。次に、子 3 div で、以下のように下部をゼロに、幅を 100% に設定します。

jsFiddle の例

#parent {
    min-height:300px;
    max-height:310px;
    height:300px;
    background-color:#e0e0e0;
    width:400px;
    padding:1%;
    position:relative;
}
div.each-element {
    border:2px solid #2d2d2d;
    text-align:center;
    font-family:'segoe ui';
    margin:2%;
    padding:1%;
}
#child3 {
    padding:0;
    border:none;
    margin:0;
    bottom:0;
    position:absolute;
    width:100%;
}
于 2013-10-31T20:18:12.777 に答える
1

子 3 div を親 div の下部に固定したいですか?

#parent{
   position: relative;
}

#child3{
   bottom: 0;
   position: absolute;
}
于 2013-10-31T20:18:37.940 に答える