4

ページを 2 つの「div」に分割したいと考えています。左 (25%) と右 (75%)。そして、それらを分離するために、2つの間に境界線が必要でした. しかし、「div」にテキスト/画像を入力しない限り、それらは展開されません。

<div>
    <div class="left">
        <img src="granted_300_50.png" id="logo">
    </div>  
</div>

そしてcssは次のとおりです。

div.left{
    background-image: url("flower_ornament2_watermark.png") ;
    background-repeat: no-repeat;
    background-color:white;
    border-top: 0px;
    border-right: 2px solid #c3c3c3; 
    border-left: 0px;
    border-bottom: 0px;
    white-space: nowrap;
    height: 100%;
    width: 350px;
    margin: 0px;
    outline: 0px;
    padding: 0px;
    vertical-align: baseline;
}

ヘルプ？

ディグビジェイ

4

4 に答える 4

4

heightインライン要素のパーセンテージでの設定は、コンテナにも特定の高さが設定されている場合にのみ機能bodyしhtmlます。

この CSS は動作するはずです:

html,body { height:100% ;}
div#container { height:100%; }
div.left { height:100%; }

別の一般的な回避策は、いわゆる「偽の列」メソッドです。

display:table;コンテナとdisplay:table-cell;フローティング div にも使用できます。ただし、IE7 ではサポートされていません。

div#container { display:table; }
div.left { display:table-cell; }
于 2012-09-16T17:20:14.933 に答える
0

これを見てください：

CSS

.left{
    width:25%;
    height:100px;
    border-right:1px solid #ccc;
}

.right{
    width:75%;
    height:100px;
    border-left:1px solid #ccc;
}

HTML

<div class="left"></div>
<div class="right"></div>​​​​​​​​​​​​​​​
于 2012-09-16T17:20:33.840 に答える
0

bodyおよびノードにも高さを設定しない限りhtml、それらは折りたたまれます。これを修正するには、高さを 100% に設定します。

デモ: http://jsfiddle.net/SO_AMK/Nhajy/

CSS:

html, body, div { height: 100%; }

div.left {
    background-image: url("flower_ornament2_watermark.png");
    background-repeat: no-repeat;
    background-color: white;
    border-top: 0px;
    border-right: 2px solid #c3c3c3; 
    border-left: 0px;
    border-bottom: 0px;
    white-space: nowrap;
    height: 100%;
    width: 350px;
    margin: 0px;
    outline: 0px;
    padding: 0px;
    vertical-align: baseline;
}​

他の解決策は、次を設定することmin-heightです。

デモ: http://jsfiddle.net/SO_AMK/MSLdT/

CSS:

div.left {
    background-repeat: no-repeat;
    background-color: white;
    border-top: 0px;
    border-right: 2px solid #c3c3c3; 
    border-left: 0px;
    border-bottom: 0px;
    white-space: nowrap;
    min-height: 100px;
    height: 100%;
    width: 350px;
    margin: 0px;
    outline: 0px;
    padding: 0px;
    vertical-align: baseline;
}​
于 2012-09-16T17:37:14.907 に答える