这是我的代码:
<div id="banner" style="position:absolute; top:0px; width:100%; background:url('../../images/banner_repeat.jpg'); background-repeat:repeat-x; <!-- border:solid pink 1px; -->">
<ul id="banner_ul">
<li id="wrm"><a href="http://whiterootmedia.com"><i>The homepage of White Root Media!</i></a></li>
<li id="google"><a href="https://plus.google.com/u/0/b/115943543157099352927/115943543157099352927" target="_blank"><i>+1 us on Google!</i></a></li>
<li id="facebook"><a href="http://www.facebook.com/pages/White-Root-Media/194381903928501" target="_blank"><i>Like us on Facebook!</i></a></li>
<li id="twitter"><a href="http://twitter.com/#!/WhiteRootMedia" target="_blank"><i>Tweet about us on Twitter!</i></a></li>
</ul>
</div>
<div id="container" style="<!-- border:solid yellow 1px -->; display: table;">
<div id="content" style="padding-top:90px; display:table-cell; min-width:945px; <!-- width:100% - 270px; -->">
This content will determine the height
</div>
<div id="right_column" style="display: table-cell; <!-- border:solid orange 1px; --> height:100%; width:270px; background-image:url('../../images/treetrunk7.png');background-repeat:repeat-y;">tree</div>
</div>
<div id="footer" style="position:relative; top:-1px; background-image:url('../../images/grass.png'); background-repeat:repeat-x; width:100%; height:100px;">grass</div>
这是实时页面: http://whiterootmedia.com/test/test4/
我想显示的内容div:table-cell到页面的整个宽度减去270px。树应该一直向右。
非常感谢任何帮助!
谢谢, 多尘
答案 0 :(得分:0)
您可以在子div中使用绝对定位
#foo {
display: table;
height: 400px;
position: relative;
width: 500px;
}
#foo > div {
display: table-cell;
height: 100%;
position: absolute;
}
#left {
background: blue;
left: 0;
right: 200px;
}
#right {
background: green;
right: 0;
width: 200px;
}
还有其他方法可以达到相同的效果,例如更改边距,我个人更喜欢上面的方法