好的，我拼命尝试定位 2 个元素，一个边和一个部分（我认为这些 HTML5 元素的使用与它们所持有的内容相关）。
对于下一页单击此处，我试图使“位置”（旁边）元素保持静态并保持在容器 div 的左侧。至于“区域”（部分），我希望它保持在页面的右侧（与“位置”元素处于同一水平）但是当尺寸减小时，我需要它保持在右侧并缩小宽度，里面的内容显示我现在的样子。我似乎已经正确设置了它，其中包含的 div 在缩小时显示在哪里，但我无法将它定位在位置元素的下一个（在级别上）。
请参阅以下标记：
<div class="mainwrapper">
<aside id="locations">
<h4 style="border-bottom: 1px dotted #990000;">Locations</h4>
<ul>
<li>
<a href="recentwork.htm">
<span>Recent Work</span>
</a>
</li>
<li>
<a href="asia.htm">
<span>Asia</span>
</a>
</li>
<li>
<a href="australia.htm">
<span>Australia</span>
</a>
</li>
<li>
<a href="britisles.htm">
<span>British Isles</span>
</a>
</li>
<li>
<a href="europe.htm">
<span>Europe</span>
</a>
</li>
<li>
<a href="london.htm">
<span>London</span>
</a>
</li>
<li>
<a href="morocco.htm">
<span>Morocco</span>
</a>
</li>
</ul>
</aside>
<section id="regions">
<h4 style="text-align:left;">Asia</h4>
<div class="thumbcontainer">
<div class="thumb">
<a href="india.htm">
<img src="images/photo/tn/india.jpg" alt="India" width="310" height="207">
</a>
<h3>India</h3>
<p>Country Description</p>
</div>
<div class="thumb">
<a href="indonesia.htm">
<img src="images/photo/tn/indonesia.jpg" alt="Indonesia" width="310" height="207">
</a>
<h3>Indonesia</h3>
<p>Country Description</p>
</div>
<div class="thumb">
<a href="malaysia.htm">
<img src="images/photo/tn/malaysia.jpg" alt="Malaysia" width="310" height="207">
</a>
<h3>Malaysia</h3>
<p>Country Description</p>
</div>
<div class="thumb">
<a href="singapore.htm">
<img src="images/photo/tn/singapore.jpg" alt="Singapore" width="310" height="207">
</a>
<h3>Singapore</h3>
<p>Country Description</p>
</div>
<div class="thumb">
<a href="thailand.htm">
<img src="images/photo/tn/thailand.jpg" alt="Singapore" width="310" height="207">
</a>
<h3>Thailand</h3>
<p>Country Description</p>
</div>
</div>
</section>
</div>
和CSS：
.mainwrapper {
width: 90%;
margin: 130px auto 0;
text-align:center;
}
.mainwrapper h4 {
text-align:center;
padding-bottom: 5px;
color: #FFF;
border-bottom: 1px solid rgba(153,0,0,1);
font-size:16px;
font-weight:200;
letter-spacing: 2px;
text-transform:uppercase;
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}
#locations {
background-color:rgba(26,26,26,0.8);
display:inline-block;
text-align:left;
width: 150px;
height:auto;
margin-top: 5px;
padding: 0 10px 0;
}
#locations ul {
list-style: none;
padding:0;
}
#locations li {
}
#locations li a {
text-align:left;
color:#FFF;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:12px;
font-weight:normal;
margin:0;
text-decoration:none;
}
#regions {
background-color:rgba(26,26,26,0.8);
display:inline-block;
vertical-align:top;
width: 90%;
margin-left: 20px;
margin-top: 5px;
padding: 0 10px 0;
}
.thumbcontainer {
display:inline-block;
width:100%;
}
.thumb {
background-color:rgba(18,18,18,0.8);
border:1px solid rgba(0,0,0,1);
margin:10px 2px;
display:inline-block;
vertical-align:top;
width: 310px;
height:270px;
}
.thumb h3 {
color: #FFF;
border-bottom: 1px solid rgba(153,0,0,1);
font-size:14px;
font-weight:200;
letter-spacing: 2px;
text-transform:uppercase;
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
margin:0 8px 0;
}
.thumb p {
color:#FFF;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:11px;
text-align:left;
padding-left:8px;
}
.thumb img {
border:0;
}
请在这里重新找到链接
非常感谢您的帮助。