-4

我正在尝试为我发布的图片中的布局提出响应式 CSS 代码。基本上，我必须front picture在图片库的顶部<div>，使用相对和绝对技术，以及灵活的 % 宽度<divs>，带导航的徽标应该使用相对绝对技术来实现。
非常感谢你。

这是CSS和HTML代码。有人可以告诉哪个 div 应该是绝对的，哪个是相对的，以实现图像中的布局。非常感谢

<body>
    <div id="wrapper">
<header>
<div id="nav">
    <ul>
        <li><a href="default.asp">Home</a></li>
        <li><a href="news.asp">News</a></li>
        <li><a href="contact.asp">Contact</a></li>
        <li><a href="about.asp">About</a></li>
    </ul>
</div>
<div id="logo">
    <h1>Welcome to Origin Cards!</h1>
    <img src="images/Logo.jpg" width="150" height="100"/>
</div>    
</header>
<div id="paragraph">
<p>
    <img src="images/Logo.jpg" />
</p>
</div>
<div id="paragraph2">
    <p>
  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
  The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
   content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum 
   as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions
   have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like
   </p>
   </div>
<footer>
<ul>
    <li><a href="default.asp">Home</a></li>
    <li><a href="news.asp">News</a></li>
    <li><a href="contact.asp">Contact</a></li>
    <li><a href="about.asp">About</a></li>
</ul>
 </footer>
</div>


</body>
</html>

和 CSS：

body {
font-size: 1em;
border: solid red;
width: 80%; 
margin: 0 auto;
border-radius: 6px; 
list-style: none;   
}

#wrapper{
width: 100%;
background: yellow; 
position: relative;
}



#logo {
float: right;
}


#nav {
list-style: none;
}

#nav li {
float: left;
list-style: none;
}

#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
}

#nav li a:hover {
color: #c00;
background-color: #fff; 
}


#paragraph {
width: 30%;
top: 10%;
left: 20%;
z-index: 1;
position: absolute;
}

#paragraph2 {
width: 80%; 
background: #332211;
top: 20%;
left: 10%;
position: absolute;
}

img {
max-width: 100%;
}

footer {

margin: 0 auto;
width: 100%;
background: #123456;
}

一世

4

1 回答 1

1

您只需要意识到“相对”设置了两个属性集的基础，1：zIndex 和 2：位置。将“front”设为高 zindex 并相对定位。

用相对的块 div 包装元素，使子元素的宽度通过所述块 div 的宽度计算 - 并且还使用包装器的左/顶部的 parentOffset 定位它们。

<div style="position:relative; display: inline; display:block; overflow: hidden; clear: both;">
  <div class=front style="position:absolute;left:XXX %; width: 15%; z-index: 100;"></div>
  <div class=other style="width: 100%; z-index: 10">
    <span />         <!-- ,,,, -->
    <ol><li /></ol>
  </div>
</div>
于 2012-09-26T18:32:11.733 回答