如何将div从外部div顶部的偏移量设置为仅使用css与外部div侧面的偏移量相同？

Question

所以我制作了一个我想做的模型，这样更容易理解。我有一个外部div占据页面的33％和一个内部div，宽度为50％（外部div）。外部div有一个＆＃34; text-align：center;＆＃34;样式因此内部div的每一侧的空间是外部div的宽度的25％。我想从页面顶部偏移内部div，因此它与顶部和侧面的距离相同。大多数对类似问题的回答都建议使用jquery，但如果有的话，我更愿意使用仅限css的解决方案。我怎么能这样做？

如果这是一个基本问题，我道歉。我对前端缺乏经验，我找不到任何方法来设置CSS属性等于其他属性的值。

任何帮助将不胜感激！

CSS：

d:/otherStore

Html：

    .side{
        background-color: #ECEFF1;
        height: 100%;
        width: 33%;
        text-align: center;

    }

    .profpic{
        width: 50%;
        border-radius: 50%;
        position: relative;

    }

Answer 1

只需输入以下两个CSS规则即可实现：padding: 25%和width: 50%。这将使图像从左，上和右平等居中。这是我使用的代码：

HTML

<div id="side">
    <image src="http://placehold.it/120x120&text=image1" id="box">
</div>

CSS

#side {
    width: 33.33%;
    height: 1000px;
    background-color: #474747;
}

#box {
    width: 50%;
    padding: 25%;
}

如果您愿意，请JSFIDDLE。

修改

为了更多相关的问题，这就是OP的CSS：

.side{
    background-color: #ECEFF1;
    height: 100%;
    width: 33%;
}

.profpic{
    width: 50%;
    border-radius: 50%;
    padding: 25%;
}

Answer 2

从CSS3开始您可以使用单位vw和vh来实现这一目标。

vh指的是视口的高度vw与其宽度的关系。

div的宽度为33%，而内部框50%为25%。因此，左侧和右侧的边距将为外部div宽度的大约33% * 25% = 8.25%。

因此，您需要的最高保证金是vw单位的<div id="outer"> <div id="inner"> lorem ipsum </div> </div> #outer{ background-color:red; width:33vw; margin:0; padding-top:1px; height:100vh; } #inner{ background-color:blue; width:50%; margin: 0 auto; margin-top:8.25vw; // this is 25% of 33% width padding-top:1px; } ：

repositories

http://jsfiddle.net/xaLc4zd2/

调整窗口大小，看看内部div如何保持其相对位置。

Answer 3

这可以作为您需要的参考。关键是对33％的容器应用盒子大小，并对容器内的元素应用25％的边距。

<div class="box">
  <div class="innerbox"></div>
</div>
<div class="box">
  <div class="innerbox"></div>
</div>
<div class="box">
  <div class="innerbox"></div>
</div>


.box{
  width: 33%;
  min-height:400px;
  background-color: #777;
  display: inline-block;
  box-sizing: border-box;
}

.innerbox{
  width:50%;
  margin:25%;
  min-height:200px;
  background-color: #444;
}

请参阅此codepen example