1

3列欲しい

これが私が持っているコードです

div id="boundaries">
<div id="fenceleft"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/fencescew.png" alt="fencescew" width="52" height="92" /></div>
<div id="fence"></div>
<div id="fenceright"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/fencescew.png" alt="fencescew" width="52" height="92" /></div>
</div>

とCSS

#boundaries {
overflow: hidden;
position:absolute;
top:240px;
display:block;
width:100%;
max-width: 1395px;
height:92px;
z-index: 15;
}

#fenceleft {
float:left;
display: block;
width:52px;
max-width: 52px;
height:92px;
}

#fenceleft IMG {
-moz-transform: scaleX(-1); /* For Mozilla Firefox */
-o-transform: scaleX(-1);   /* For Opera */
-webkit-transform: scaleX(-1); /* For Safari, Google chrome */

/* For IE */
filter: FlipH;
-ms-filter: "FlipH";
}

#fence {
float: left;
background: url(img/fence.png) repeat-x;
display: block;
height:82px;
}

#fenceright {
float:right;
display: block;
width:52px;
max-width: 52px;
height:92px;
}

境界divの内側に、左のフェンスと右のフェンスに固定幅の画像を含めたいと思います。#fence divが2つのdivの間の残りのスペースを埋めるようにしたいのですが、右側の画像をページの右側に固定し、左側を左側に固定する必要があります。残りはdivが欲しいです。

この質問は一般的ですが、私の問題は独特であることに注意してください。 問題は、真ん中または'#fence' divにコンテンツがなく、背景画像だけがあることです。この選択されたコードでは、幅を満たすコンテンツがないため、何も表示されません。

要約すると、[52pxdiv固定左][残りの幅div][52pxdiv固定右]

4

4 に答える 4

2

私が理解しているように、次のようなものが必要です。

html:

<div class="leftFence"></div>
<div class="center"></div>
<div class="rightFence"></div>

CSS:

.leftFence,
.rightFence {
    position: fixed;
    height: 100%;
    width: 52px;
    background: red;
    top: 0;
}
.leftFence {
    left: 0;
}
.rightFence {
    right: 0;
}
.center {
    margin: 0 52px;
    height: 100px;
    background: gray;
}

デモ

于 2013-03-05T11:33:28.917 に答える
1 
#fixwidth1{
width:52px;

}

#fixwidth2{
width:52px;

}

#dynamicwidth{
width:calc(100%-104px); //i.e 100% width of browser - sum of two fixed width 
background:#114455;
}
于 2013-03-05T11:30:03.280 に答える
0

html では、中央の div は左右の div の後にある必要があります。

<div id="boundaries">
     <div id="fenceleft"><img src=""  width="52" height="92" /></div>
     <div id="fenceright"><img src="" width="52" height="92" /></div>
     <div id="fence"></div>
</div>

in CSS margin: 0 auto中央の div で残りを埋め、中央の div の幅を指定する必要があります。#fence { margin:0 auto; 背景: url() 繰り返し-x; 表示ブロック; 高さ:92px; 幅: 700px; 位置:相対;
}

#fenceright {
     position:relative;
     float:right;
     display: block;
     width:52px;
     max-width: 52px;
     height:92px;
}

こんにちは、一例です。ここを参照してください。これがあなたに役立つことを願っています。

于 2013-03-05T11:19:09.877 に答える
0

boundariesdivの css を次のように変更します。

#boundaries {
   overflow: hidden;
   position:absolute;
   top:240px;
   display:block;
   left:0;
   right:0;
   height:92px;
   z-index: 15;
}

これにより、コンテンツ全体の幅が画面解像度に適切にスケーリングされます.nvrはwidth:1395px. コンテナを絶対的に作成boundariesしたので、上、左、右下の値（および幅と高さ）を使用してコンテナを伸ばすことができます。

fenceleftcss を次のように変更します。

#fenceleft {
    position: relative;
    float:left;
    left:0;
    width:10%;
    height:100%;
}

boundariesしたがって、どの解像度でも、左フェンスは常に親の左境界線、つまりdivから左に 0 になります。パーセンテージで高さを指定すると、高さを調整する必要があるときはいつでも、親クラスを 1 つのクラスだけ調整するだけで済みます。

fenceright CSS を次のように変更します。

#fence {
    position: relative;
    height:100%;
    width:80%;
    float: left;
}

ここで注意してください: div に配置float:leftしたためfenceleft、フェンスはそれ自体の隣に配置されます。つまり、境界 (親) div の左境界から 10% (fenceleft の幅) 離れています。

また、80% の幅が与えられているため、80%+10% (左から) = 90% となり、100-90 = 10%、つまり 10% の幅がfencediv の右側に残ります。あなたがあなたを置くことができるfenceright

あなたfencerightをこれに変更してください：

#fenceright {
    position: relative;
    left:90%;
    width:10%;
    height:100%;
    border:Solid 1px #666666;
}

これで、すべての div が適切に配置され、水平スクロールがなく、画面の水平幅全体がカバーされます。これらを直接コピーして貼り付けないでください。それに応じて CSS を整理し、計算を行います。画面だけでなく、さまざまな解像度について考えてください。

これを読む。それはあなたを助けるでしょう。

于 2013-03-05T11:04:12.810 に答える