Question

我需要做一个位置：我的r1级绝对上升。问题是它当我调整浏览器大小时移动位置。没有其他元素包括图像这样做直到我尝试使用position：absolute元素。我知道还有其他方法可以实现这个但我真的需要学习如何在响应式设计中使用它我的网站是www.michaelmorris.website。我想要的样式是左边的垂直链接，两个垂直堆叠的玫瑰在链接的右边。一个大的保存日期图像居中在中间和两个垂直堆叠的玫瑰图像在右边。我有一个先前尝试使用位置的截图：绝对是我能够实现这个设计但问题是它没有响应。发布的代码，但我突出显示一切使用控件K，它仍然不允许我发布。我也用过Chrome 美化，它仍然不允许我发布。

<div id="MasterContainer">
        <section>
         <ul id="tes">
        <li class="l"><a href="index.html">Home</a></li>
    <li class="l"><a href="gallery.html">Gallery</a></li>
    <li class"l"><a href="MessageBoard.php">Messages</a></li>
    <li class"l"><a href="About.html">About Us</a></li>
    <li class="r1"><img src="http://michaelmorris.website/Images/Roses.jpg"> `enter code here`</li>  
<section>


img{
    max-width: 100%;
    }
    #tes{
    margin: 0;
      padding: 0;
      list-style: none;hnnbvcxzbc
    border: 5px solid #eee8aa; 
    }
    li a{
    color: #FFFFFF;
     font-size:1.82em;
        font-style:italic;
        list-style: none;
    }
    #MasterContainer{
        width: 100%;
      margin: 0%;
      padding: 0 5%;
        }
    .r1{    
          width: 10%;
       position: absolute;
       top: 10%;
       left: 10%;
      float: left;
    }

Answer 1

你的r1类设置它的宽度，顶部和左边是它的父容器的10％...所以当你调整浏览器的大小时，10％当然会改变...你应该使用像素代替百分比。见http://www.w3schools.com/css/css_positioning.asp

调整大小后图像r1移动

1 个答案: