Question

当我调整页面大小时，div元素会被放错位置。此外，如果我改变分辨率，它又会被错放

CSS：

html {
    height: 100%;
    width: 100%;
}

body {
    border: 1px solid black;
    height: 100%;
    width: 80%;
    text-align: center;
    margin-left: 50px;
}

svg {
    font: 10px sans-serif;
}

.resize path {
    fill: #666;
    fill-opacity: .8;
    stroke: #000;
    stroke-width: 2.5px;
}

.extent {
    fill-opacity: .45;
    shape-rendering: crispEdges;
    stroke-width: 10 stroke: #fff;
    stroke-height: 10;
}

.leftcontainer {
    float: left;
    margin-left: 0px;
    width: 35%;
    height: 21%;
    margin-top: 10px;
}

.centercontainer {
    float: center;
    margin-left: -40px;
    width: 30%;
    height: 40%;
}

.graphcontainer {
    float: left;
    margin-left: -310px;
    width: 25%;
    height: 10%;
    margin-top: 120px;
}

.clegendcontainer {
    float: left;
    width: 25%;
    height: 10%;
    //border: 1px solid black;
    margin-left: -160px;
    margin-top: 161px;
}

.blegendcontainer {
    float: left;
    width: 25%;
    height: 10%;
    //border: 1px solid red;
    margin-left: -318px;
    margin-top: 201px;
}

.olegendcontainer {
    float: left;
    width: 25%;
    height: 10%;
    //border: 1px solid yellow;
    margin-left: -318px;
    margin-top: 241px;
}

.alegendcontainer {
    float: left;
    width: 25%;
    height: 10%;
    //border: 1px solid brown;
    margin-left: -318px;
    margin-top: 281px;
}

.axis path, .axis line {
    fill: none;
    stroke: #000;
    stroke-width: 1.85px;
    shape-rendering: crispEdges;
}

HTML：

<h1>
  Mockup of Tinderbox chart DV
</h1>
<h4>
  Select the date range by dragging the mouse over the time period
</h4>

<div class = "leftcontainer" id="timer" style="border:1px solid #ccc" ></div>
<div class = "graphcontainer" id="graph" style="border:1px solid #ccc"></div>
</div>
<div class = "clegendcontainer" id="checkinslegend" style="border:1px solid #ccc"></div>
<div class = "blegendcontainer" id="buildslegend" style="border:1px solid #ccc"></div>
<div class = "olegendcontainer" id="osslegend" style="border:1px solid #ccc"></div>
<div class = "alegendcontainer" id="appseclegend" style="border:1px solid #ccc"></div>

谢谢：）

Answer 1

不要使用margin-left为负数。

.centercontainer {
    float: center;
    margin-left: -40px;
    width: 30%;
    height: 40%;
}

.graphcontainer {
    float: left;
    margin-left: -310px;
    width: 25%;
    height: 10%;
    margin-top: 120px;
}

.clegendcontainer {
    float: left;
    width: 25%;
    height: 10%;
    //border: 1px solid black;
    margin-left: -160px;
    margin-top: 161px;
}

.blegendcontainer {
    float: left;
    width: 25%;
    height: 10%;
    //border: 1px solid red;
    margin-left: -318px;
    margin-top: 201px;
}

.olegendcontainer {
    float: left;
    width: 25%;
    height: 10%;
    //border: 1px solid yellow;
    margin-left: -318px;
    margin-top: 241px;
}

.alegendcontainer {
    float: left;
    width: 25%;
    height: 10%;
    //border: 1px solid brown;
    margin-left: -318px;
    margin-top: 281px;
}

当我调整html页面的大小时，元素正在被取代

1 个答案: