当我调整html页面的大小时，元素正在移动

-2

当我调整页面大小时，div元素被放错了位置。另外，如果我更改分辨率，它再次被放错了地方当我调整html页面的大小时，元素正在移动

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>

谢谢:)

来源

2014-02-18 krishna_v

尝试将所有css属性值从像素转换为百分比 – dreamweiver

这是正常行为。你想达到什么目的？这个问题的重点是什么？什么是**真正的**问题？ –

andrzej，我会在相应的div中添加svg图。所以当页面大小调整或以不同的分辨率查看时，我想要有相同的布局。 –

不要使用与容限否定。

.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; 
}

来源

2014-02-18 12:52:49

当我调整html页面的大小时，元素正在移动

回答

相关问题