0
2つの質問があります。 1 - 右側にid="rightcolumn"という名前のdivがありますpadding: 10px; div id="rightcolumn"の中にrightcolumn_sと呼ばれる葯があります。 div id = rightcolumn_sは開けませんmax-width:100%; .why？ 2 - id="rightcolumn"にはCollapse/Expandがあります。この縮小展開ポイントがあります。 ポイントはitem_1、item_2、item_3の後ろの左側にあります。私は点が必要です 単語の右側のitem_1、item_2、item_3の前。任意の助け おかげで..... The websitedivプロパティの幅が最大でない/折りたたむ展開
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;| | | | | |</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>
このdiv id = rightcolumn_sは最大幅：100％;なぜ開きませんか？私はあなたが何を求めているか正確にはわかりません。たぶん、あなたの質問に言い換えてください。そして2番は、弾丸が正しい場所にあるようです。しかし、私はあなたの質問がより明確になると言いました。多分あなたが達成しようとしていることを正確に言い換えようとします。 –