javascript - div 属性宽度不是最大/折叠展开

Question

请问我有两个问题。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 这个 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代码:

<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;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</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>

Answer 1

1)这个div id = rightcolumn_s没有开启max-width:100%;

为了使 max-width 属性起作用，您还需要为元素设置宽度。

max-width: 100%;
width: 100%;

2) 我需要右侧单词 item_1,item_2,item_3 之前的点。

定义 float: right; 到 ul ，这也会将点放在右边。

<ul style="float: right;">