Question

我正在进行数据可视化（vis），我希望vis能够为不同颜色设置一个键（如侧边栏）。我一直这样做是通过制作一个div并将其向左浮动并且vis向右浮动：

HTML

<div id="Container">
    <div id="key"></div>
    <div id="visContainer">
        <div id="vis"></div>
    </div>
</div>

CSS

#key{
    float:left;
    width:5%;
}
#visContainer{
    float: right;
    width: 95%;
}
#vis{
    outline: solid;
    outline-color: black;
}

但很明显，vis div并不总是以屏幕为中心。有没有办法使这成为可能（即有一个中心的vis，有一个不会妨碍vis div中心性的支持）？

P.S。如果可能的话，我想避免使用绝对位置作为这样的id来缩放页面大小。

Answer 1

您可以使用百分比来计算vis容器元素中屏幕的中心：

50% * 95% = 47.5%

你的vis元素的中心应该是什么。现在只减去它宽度的一半，你就可以了：

47.5% - (10% / 2) = 42.5%

在此处查看：

＆＃13;

#key{
    float:left;
    width:5%;
  height: 30px;
  background: yellow;
}
#visContainer{
    float: right;
    width: 95%;
  height: 30px;
  background: cyan;
  position: relative;
}
#vis{
    outline: solid;
    outline-color: black;
  width: 10%;
  margin-left: 42.5%;
}

＆＃13;

<div id="Container">
    <div id="key"></div>
    <div id="visContainer">
        <div id="vis"></div>
    </div>
</div>

＆＃13;

当然，你可以通过在侧边栏上使用绝对位置来避免所有的数学运算（它仍然会缩放）。请注意，现在可见元素的10％宽度是整个身体宽度的10％，因为容器是100％宽（在＆＃34;＆＃34; #key侧边栏＆＃34;）。

在此处查看：

＆＃13;

#key{
  position:absolute;
  z-index: 1;
    width:5%;
  height: 30px;
  background: yellow;
}
#visContainer{
  height: 30px;
  background: cyan;
  position: relative;
}
#vis{
    outline: solid;
    outline-color: black;
  width: 10%;
  margin: auto;
}

＆＃13;

<div id="Container">
    <div id="key"></div>
    <div id="visContainer">
        <div id="vis"></div>
    </div>
</div>

＆＃13;

Answer 2

<强> HTML

<div class="main-block">
 <div id="Container">
   <div id="key">ddd</div>
     <div id="visContainer">
       <div id="vis">sss</div>
     </div>
   </div>
 </div>

<强> CSS

.main-block{ 
  display: inline-block; 
  width: 100%; 
  text-align: center;
}

#container{
 width: 50%;
 display: inline-block;
}

将div放在页面中心，无论其中包含哪个元素

2 个答案: