절대 위치 지정

Question

이 웹 페이지를 http://s394436795.websitehome.co.uk/careforall/에 작성했으며 Chrome & Safari는 괜찮아 보이지만 Firefox에서는 깨졌습니다.

CSS와 HTML은 매우 간단합니다. 대부분의 DIV를 절대 위치로 설정했지만 이것이 최선의 방법이 아닙니까?

<div id="elderlycare"> 
<h2>Elderly Care</h2> 
<p class="elderlycare1">In the many years Aggie has worked as a care worker, she has seen first hand that elderly people prefer the familiar surroundings of their own home and frequently it is a companion that is needed rather than a care company that only supply the basics.</p> 
<p class="elderlycare2">Aggie has dedicated her time to a number of clients over the years and prides herself on getting to know them individually. By building friendly and close relationships, she allows you to get that essential break knowing your family is safe and happy in their own home.<br /><br />Aggie is patient, easy to talk to and benefits from being a qualified carer. Not only can she offer company for your relatives, she is able to help professionally with personal hygiene and</p> 
<p class="elderlycare3">oversee dietary and nutritional needs. She is also able to provide transportation, be it to or from a train station, an appointment or just a trip to the local shop.<br /><br />A comprehensive meeting with Aggie will be essential before booking in order for her to meet your relative and assess their needs. Please contact her for details.</p> 
</div> 

와 CSS : 나는

예를 들어

는 '포괄 지원'섹션의 HTML이입니다 ... 그래서 가정

#elderlycare h2 { 
font-family: 'BebasRegular', Arial, sans-serif; 
letter-spacing: 0; 
text-transform: uppercase; 
font-size: 28px; 
color: #515f7f; 
font-weight: normal; 
} 
#elderlycare { 
width: 460px; 
position: relative; 
top: 75px; 
left: 320px; 
padding: 55px 0 0 0; 
margin: 0; 
} 
.elderlycare1{ 
font-family: Georgia, "Times New Roman", Times, serif; 
font-size: 14px; 
color: #515f7f; 
margin: 0 150px 0 0; 
} 
.elderlycare2{ 
font-family: Georgia, "Times New Roman", Times, serif; 
font-size: 14px; 
color: #515f7f; 
margin: 35px 0 0 130px; 
} 
.elderlycare3{ 
font-family: Georgia, "Times New Roman", Times, serif; 
font-size: 14px; 
color: #515f7f; 
margin: 25px 150px 0 0; 
} 

모든 보장하기 위해 무엇을 할 수 있는지 DIV는 모든 브라우저에서 올바른 위치에 절대적으로 배치 될 수 있습니다. 솔직히 나에게 도움이 될 수 있다면 좋겠다.

덕분에

Answer 1

나는 당신이 달성하려고하는 것을 볼 수 있지만, 당신은 몇 가지 큰 장애물에 직면 해있다. 동일한 글꼴 사양이 여러 브라우저에서 동일하게 렌더링되지 않으므로이 정도까지 게재 위치를 미세 조정하면 항상 불일치가 발생합니다. 귀하의 접근 방식은 CSS의 가장 강력한 속성 중 하나를 제공합니다. 콘텐츠를 자동으로 전달하는 기능. 이를 염두에두고, 페이지 배경의 일부로 이미지와 수평 분할자를 갖는 단점 만 볼 수 있습니다.

적절한 패딩으로 이미지를 떠 다니고 텍스트 주위로 흐르게하여이 디자인에 접근합니다. 수평 분할기는 각 섹션 사이에 쉽게 배치 할 수 있습니다. 결과는 모든 브라우저에서 동일하지만 100 % 동일하지는 않게 보입니다. 이 방법을 시도해 보았지만 적절하지 않다고 생각하십니까? 그런데, 그게 무슨 문제였습니까?