如何在浏览器的右侧设置DIV并设置百分比裕度,以使其在调整浏览器大小时更加接近边缘?

时间:2019-03-11 18:32:54

标签: html css responsive-design

我会在这里尝试更好地解释

放置在页面上并在左侧有10%的元素 当页面尺寸改变时,左边距的尺寸变小 {{1}中的10%1400px - 140px中的10%(非常基础)

现在如何使它发生在右侧的元素上 因此,在浏览器1000px - 100px上,右边距将为1400px 当将浏览器的140px更改为width时,右侧的1000px将是margin

抱歉,我没有要显示的示例

2 个答案:

答案 0 :(得分:0)

您可以使用视口宽度来完成此操作。

.element {
    margin-left:10vw;
}

答案 1 :(得分:0)

我认为您的问题没有提供足够的信息。但我会给您几个可能的答案。希望它们能为您提供帮助。

第一个解决方案

 body
 {
    position:relative;
 }

.element
{
   position:absolute;
   right: 10%
}

第二个解决方案

 body
 {
     position:relative;
 }

.element
 {
    position:absolute;
    margin-right:10vw;
 }

第三种解决方案

body
{
 padding-right:10%;
}

body
{
  background-color:#FEFEFE; 
  height:650px;
  direction:rtl;
  position:relative;
  
}

.container
{
  
  width:100%;
  padding-right:10%;
  height:100%;

}

.element
{
  
  width:200px;
  height:100px;
 
}

.first
{
  background-color:red;
}

.second
{
  position: absolute;
  background-color: blue;
  margin-right: 10%;
  top: 120px;
  right: 0;
  
}

.third
{
   position:absolute;
   background-color:green;
   right:10%;
   top:240px;
}
<body>
  <div class="container">
    <div class="element first">
       <h3>first div</h3>
    </div>
    <div class="element second">
       <h3>second div</h3>
    </div>
    <div class="element third">
       <h3>third div</h3>
    </div>
  </div>
  
</body>