2

私はこれに関するアイデアを使い果たしたので、これを機能させるための助けを探しています。または、確認が不可能であり、どうすればよいかを提案するかもしれません!

wordpress サイトのスタイルを変更し、メイン コンテンツの左右に siv を追加して、境界線の外側の画像を配置しました。

私の問題は、div を親の高さまで拡張できないことです!

レイアウトは次のとおりです。

<div class="content_botbg">
<div class="content_bg_left"></div>
<div class="content_res"></div>
<div class="content_bg_right"> </div>
<br style="clear:both">
</div>

そしてCSS：

.content_botbg {
background: none repeat-x scroll center bottom transparent;
border-bottom: 0 solid #EFEFEF;
margin: 0 auto;
min-height: 600px;
padding: 0;
text-align: left;
width: 988px;
}

.content_bg_left {
    background: url("images/content-container-left.png") repeat-y scroll 0 0 transparent;
    float: left;
    width: 24px;
}

.content_res {
    background: url("images/transparent_background.png") repeat scroll 0 0 transparent;
    float: left;
    margin: 0 auto;
    padding: 20px 0 30px;
    width: 940px;
}

.content_bg_right {
    background: url("images/content-container-right.png") repeat-y scroll right center transparent;
    float: left;
    width: 23px;
}

私は髪を引き裂いていたので、誰かが助けてくれることを願っています。

ありがとう、

ライアン

4

3 に答える 3

1

position:relative を親 div に追加してみてください

次に、子の幅と高さを指定する必要があります。

最後に、特別なケースの div (class="content_bg_IE") を追加して、常に非準拠の IE の場合に備えて他の div を展開します。

例えば： 

<html>
<head>
<style>
.content_bg_IE   { height:600px; width:0px; }
.content_botbg {
  background: none repeat-x scroll center bottom transparent;
  position:relative;
  border-bottom: 0 solid #EFEFEF;
  margin: 0 auto;
  min-height: 600px;
  padding: 0;
  text-align: left;
  width: 988px;
}

.content_bg_left {
    background: url("images/content-container-left.png") repeat-y scroll 0 0 transparent;
    min-height: 600px;
    float: left;
    width: 24px;
}

.content_res {
    background: url("transparent_background.png") repeat scroll 0 0 transparent;
    min-height: 600px;
    float: left;
    margin: 0 auto;
    padding: 20px 0 30px;
    width: 940px;
}

.content_bg_right {
    background: url("images/content-container-left.png") repeat-y scroll right center transparent;
min-height: 600px;
    float: left;
    width: 23px;
}
</style>
</head>
<body>
hello world!
<div class="content_botbg">
<div class="content_bg_left"><div class="content_bg_IE"></div></div>
<div class="content_res"><div class="content_bg_IE"></div></div>
<div class="content_bg_right"><div class="content_bg_IE"></div></div>
<br style="clear:both">
</div>
</body>
</html>
于 2012-05-23T19:31:40.500 に答える
1

フロートを削除し、絶対配置を使用することで機能するはずです（fiddle を参照）。右側もwidth: 24px全体widthに基づいている必要があるようですが、23px（コードごとに）そのままにしておいたので1px、フィドルの例にギャップがありますが、オフの場合は簡単に修正できます。

HTML

<div class="content_botbg">
<div class="content_bg_left"></div>
<div class="content_res"></div>
<div class="content_bg_right"> </div>
</div>

CSS

.content_botbg {
   border-bottom: 0 solid #EFEFEF;
   margin: 0 auto;
   padding: 0;
   text-align: left;
   width: 988px;
   position: relative; /* added */
}

.content_bg_left {
    background: url("images/content-container-left.png") repeat-y scroll 0 0 transparent;
    position: absolute; /* replaced float */
    top: 0; /* added */
    bottom: 0; /* added */
    left: 0; /* added */
    width: 24px;
    min-height: 600px; /* moved from content_botbg */
}

.content_res {
    background: url("images/transparent_background.png") repeat scroll 0 0 transparent;
    /* removed float */
    margin: 0 auto;
    padding: 20px 0 30px;
    width: 940px;
}

.content_bg_right {
    background: url("images/content-container-right.png") repeat-y scroll right center transparent;
    position: absolute; /* replaced float */
    top: 0; /* added */
    bottom: 0; /* added */
    right: 0; /* added */
    width: 23px;
}
于 2012-05-24T01:47:22.207 に答える
0

position:relative親に追加してから実行する必要がありますheight:100%：

.content_botbg {
    position:relative;
    background: none repeat-x scroll center bottom transparent;
    border-bottom: 0 solid #EFEFEF;
    margin: 0 auto;
    min-height: 600px;
    padding: 0;
    text-align: left;
    width: 988px;
}

そして、子供たちのために：

.content_bg_left, .content_bg_right, .content_res {
    height:100%;
}

結果は次のようになります: http://jsbin.com/arere4

等高列の詳細については、http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks を 参照してください。

さらに、jQuery を使用して、次のように同じ効果を得ることができます: http://jsfiddle.net/ULUJX/

于 2012-05-23T20:17:23.857 に答える