我有两个问题。
1 - 我在右边有一个叫id="rightcolumn"的div padding: 10px;
在div id="rightcolumn"内，我有一个叫rightcolumn_s的花药div。
div id = rightcolumn_s不对max-width:100%;开放。为什么？
2 - 在div id="rightcolumn"中我有Collapse/Expand此折叠展开有点数。
这些点位于item_1，item_2，item_3之后的左侧。我需要积分
在右侧的item_1，item_2，item_3之前。
谢谢你的帮助.....
The website
css代码：
a { color:blue; }
#content { background-color:#dddddd; width:200px; margin-top:2px; }
html{
height:0px;
text-align: right;
width:1280;
height:1024px;
}
body {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_body.png');
background-repeat:repeat;
overflow:hidden;
font-family:Palatino Linotype;
font-family: Arial;
font-size: 12px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height:600px;
}
.insidWindow {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_inside_window.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
margin: 0px auto 10px auto;
padding: 10px;
position: relative;
top:-515px;
width:52.5%;
}
h2 {
color: #443333;
font-size: 14px;
line-height: 7px;
margin: 0px 5px 0px 5px;
padding: 5px;
color: white;
}
.lineAzure{
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_line.png');
background-repeat:repeat;
line-height: 7px;
margin: 0px 0px 0px 0px;
height:15px;
}
#lineAzurebotom {
background: none repeat scroll 0 0 #880000;
line-height: 11px;
margin: 0;
position: relative;
top: -516px;
}
#leftcolumn_s {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_line.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
height: 115px;
margin: 0 auto 0 auto;
padding: 10px;
position: relative;
top: 360px;
width: 88%;
}
#rightcolumn_s{
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_line.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
height: 115px;
max-width:100%;
margin: 0px;
padding: 10px;
position:absolute; /* absolute position (so we can position it where we want)*/
bottom:0px; /* position will be on bottom */
}
#chatRead {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_dark.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
line-height: 90px;
margin: 0 auto;
position: relative;
top: -520px;
width: 55%;
}
#chatWrite {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_line.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
line-height: 25px;
margin: 0 auto;
position: relative;
top: -520px;
width: 55%;
}
#lineYelow{
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_lineYellow.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
line-height: 7px;
height:15%;
color: #745B1B;
font-family: 'CarterOneRegular';
font-size: 16px;
line-height: 34px;
margin: 0;
padding: 0;
text-shadow: 1px 1px 0 #FFF0D8;
width: auto;
}
#wrapMein{
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_wrapMein.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
overflow:hidden;
margin: 0px 5px 20px 5px;
padding: 0px 0px 0px 0px;
position: relative;
height:540px;
}
.column {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_lineYellow.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
height: 505px;
margin: 5px;
padding: 0 5px;
position: relative;
top: -15px;
width: 20%;
}
.rcolumn{
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_lineYellow.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
margin: 0px 0px 0px 0px;
padding: 10px;
position: relative;
width:20%;
height:495px;
position:relative;
top:-528px;
float:right;
color: red;
}
.ui-wrapper {
border: 2px solid #70A029;
}
.ui-resizable {
position: relative;
}
.ui-resizable-e {
background: url("../pic/resizable-e.gif") repeat scroll right center transparent;
cursor: e-resize;
height: 100%;
right: 0;
top: 0;
width: 6px;
}
.ui-resizable-handle {
display: none;
font-size: 0.1px;
position: absolute;
}
.ui-resizable-s {
background: url("../pic/resizable-s.gif") repeat scroll center top transparent;
bottom: 0;
cursor: s-resize;
height: 6px;
left: 0;
width: 100%;
}
.ui-resizable-se {
background: url("../pic/resizable-se.gif") repeat scroll 0 0 transparent;
bottom: 0;
cursor: se-resize;
height: 9px;
right: 0;
width: 9px;
}
.maintitle1 {
background: center top #2C6987 repeat-x scroll ;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
box-shadow: 0 1px 0 #528CBC inset;
color: #FFFFFF;
font-size: 16px;
font-weight: 300;
padding: 6px 10px 6px 10px;
}
#logo{
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
position:fixed;
top:34px;
left:0px;
height: 9.6%;
}
.resolution span {
color: #2B8E00;
display: block;
font-size: 55px;
text-transform: lowercase;
}
HTML code：
<body >
<img id="logo" src="http://www.centerwow.com/linkguide/guide_files/pic/Notebook.png" alt="Link Guide" />
<h2>this is body background.</h2>
<div class="lineAzure">this is div class lineAzure </div>
<div id="lineYelow">this is div id LineYelow</div>
<div id="wrapMein">
<div class="lineAzure" style="margin: 0px 22.6% 0px 22.6%;" "width:52.5%"="">this
div
classlineAzurespnbsp;| | | | | |</div>
<div id="leftcolumn" class="column">here is div id = leftcolumn
<div id="leftcolumn_s">here is div id = leftcolumn_s</div>
</div>
<div id="rightcolumn" class="rcolumn">div id="rightcolumn"
<div class="floatRight"><H3 class="maintitle1">articals</H3></div>
<ul>
<li>
<a href="#" onclick="toggle('node1')">Item 1</a>
<ul id="node1" style="display:none">
<li>Sub-item 1</li>
<li>
<a href="#" onclick="toggle('node2')">Sub-item 2</a>
<ul id="node2" style="display:none">
<li>Sub-sub-item 1</li>
<li>Sub-sub-item 2</li>
</ul>
</li>
<li>Sub-item 3</li>
</ul>
</li>
<li>
<a href="#" onclick="toggle('node3')">Item 2</a>
<ul id="node3" style="display:none">
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
<div id="rightcolumn_s">here is div id = rightcolumn_s</div>
</div>
<div class="insidWindow">insidWindow
<div id="windowResize" class="ui-wrapper" style="height: 340px; width: 350px;">
<div style="position: absolute; top: 20px; left: 20px; ">
Resize me<br>
Please try to resizeme:<br> www www www.
<div class="resolution">
You are using
<span id="resolutionNumber"></span>
</div>
</div>
</div><br>
</div><!--insidWindow-->
<div id="chatRead">here is div id = chatread</div>
<div id="chatWrite">here is div id = chatWrite</div>
<div id="lineAzurebotom">here is div id = lineAzurebotom</div>
</div><!--wrapMein-->
</body></html>
答案 0 :(得分：0)
1）此div id = rightcolumn_s未向最大宽度开放：100％;
为了使max-width属性起作用，您还需要设置元素的宽度。
max-width: 100%;
width: 100%;
2）我需要在右侧的item_1，item_2，item_3之前的分数。
将float: right;定义为ul，这也会将点放在右侧。
<ul style="float: right;">