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, 나는 해당 divs에 svg 그래프를 추가합니다. 그래서 페이지 크기를 조정하거나 다른 해상도로 볼 때 같은 레이아웃을 사용하고 싶습니다. –

사용하지 마십시오 margin- 부정적으로 남았습니다.

.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 페이지의 크기를 조정하면 요소가 옮겨집니다.

답변

관련 문제