Question

好的，我正在拼命地尝试定位2个元素，一个旁边和一个一节（我认为这些HTML5元素的使用与它们所持有的相关）。

对于以下页面Click Here我试图将'Locations'（Aside）元素设置为静态并保留在容器div的左侧。至于'Regions'（部分）我希望它保持在页面的右侧（与'locations'元素在水平上）但是当缩小尺寸时我需要它保持在右侧并且只是减少宽度，里面的内容显示我现在的方式。我似乎已经正确地设置了它在其中包含的div在缩小时显示的位置但是无法将其下一个（On Level）定位到位置元素。

请参阅以下标记：

<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;
}

请再次找到该链接Here

非常感谢您的帮助。

Answer 1

试试这个......

删除位置：从HEADER修复，从#regions中移除宽度：90％并用此替换.mainwrapper CSS声明：

.mainwrapper {
    margin: 40px 2% 0;
    padding-left: 168px;
    position: relative;
    text-align: center;
}

Answer 2

您应该分别在“地理位置”和“地区”元素上使用float:left和float:right，以便它们处于同一级别，如您所说。

我还会使用媒体查询来更改Regions元素的宽度，因为在90％时，它并不总是能够在左侧拥有Locations元素。我个人认为你应该摆脱Regions元素的百分比宽度，并通过媒体查询有条件地设置它。

有关媒体查询的更多信息：here。

例如，您的Regions元素需要大约636px宽才能显示两张照片。所以你可以有一个媒体查询来允许这个宽度，加上你的边距，填充和Locations元素宽度的宽度，你会有这样的东西：

@media (min-width: 956px) { 
#regions {
width: 636px;
}
}

它需要956px宽才能有三个显示。所以你可以在它下面有另一个媒体查询：

@media (min-width:1276px) { 
#regions {
width: 956px;
}
}

您可以添加max-width:955px来解释所有问题。您使用这样的媒体查询，以便在调整页面时，它将显示尽可能多的照片，并且还可以显示Locations元素。

以我所制作的JSFiddle here为例。可能希望查看全屏版本here，以便在更改浏览器窗口的宽度时查看其工作原理。

并排定位2个元素 - 在左侧元素静态＆amp;右侧元素宽度随页面扩展

2 个答案: