절대 위치 지정에서 여러 div 크기 조정

작은 문제가 있습니다. 고정 너비와 높이가 50px이고 절대 위치가 지정된 div가 4 개 있습니다. 샘플 레이아웃은 2 x 2입니다.절대 위치 지정에서 여러 div 크기 조정

이들 사이에 10px 갭이 수동으로 배치됩니다. 문제는 상자의 크기를 조정해야 할 경우 개별적으로 크기를 조정해야하고 절대 위치 지정을하고 그 사이의 공간을 다시 계산해야하므로 더 많은 div를 갖게됩니다. Sass가이 문제를 해결하는 데 도움이 될 수 있다고 들었습니다. 그래서 Sass를 사용하여 도움을 얻으려고하지만이 작업을 수행하는 방법을 잘 모릅니다.

예 :

HTML :

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="test.css"/> 
    <title></title> 
</head> 
<body> 
    <div class="section"> 
     <div class="box" id="box-position-1"></div> 
     <div class="box" id="box-position-2"></div> 
     <div class="box" id="box-position-3"></div> 
     <div class="box" id="box-position-4"></div> 
    </div> 

</body> 
</html>

CSS :

.section { 
    position: relative; 
} 

.box { 
    width: 50px; 
    height: 50px; 
    position: absolute; 
    border: 1px solid #000; 
} 

#box-position-3, 
#box-position-4 { 
    top: 60px; 
} 

#box-position-2, 
#box-position-4 { 
    left: 60px; 
}

출처

2014-02-26 TJXStyles

내 첫 번째 질문은 진정한 위치 여야한다는 것입니다 : 절대; 당신이 바라는 시각적이며 기능적인 결과는 무엇입니까? 나는 당신이 다른 방식으로 그것을 할 수있는 큰돈을 걸 것이라고 말합니다. 잠재적으로 적용 가능한 표 셀 소리. – Michael

상자의 크기를 조정한다는 것은 무엇을 의미합니까? – Huangism

Divs가 절대 위치에있는 이유는 무엇입니까? – LcSalazar

대신 절대 위치를 사용하여, 당신은 float 또는 display: inline-block (또는 테이블) 같은 것을 시도 할 수있는 서로의 거리를 수동으로 조정하지 않고 div 항목을 함께 흐르게하거나 각 항목에 개별 ID를 사용합니다.

시도 할 수있는 여러 가지 솔루션이 있습니다. 나는 Table 솔루션을 추천하지만 이것은 필요에 따라 다를 수있다.

사용 플로트 :

확인이 설정하는 가장 쉬운 방법이 JSFiddle

! .box 클래스에 float: left;을 추가하기 만하면됩니다. 이렇게하면 DIV 요소가 자동으로 위치를 잡을 수 있습니다. 이 상자를 서로 특정 간격으로 배치하려면 margin: (number)px;을 추가하십시오.

사용하여 인라인 블록 :

상기와

Check out this JSFiddle

같은! float 대신 display: inline-block을 추가하면됩니다. 이렇게하면 텍스트와 같은 div가 처리되므로 텍스트가 포함 된 블록에 이러한 상자를 삽입하려는 경우주의해야합니다.

표 사용 :

이 가장 certianly 갈 수있는 가장 좋은 방법입니다.

Here's a JS fiddle.

테이블은 아주 잘 문서화, 그래서 대신 내가 어떤 리소스를 제공합니다 (원본보다 완전히 다른 것입니다)이 코드를 설명 할 수 있습니다.

http://www.w3schools.com/html/html_tables.asp

http://www.temple.edu/cs/web/tables.html

는 (나는 사람들이 W3 스쿨 싫어 알고 있지만이 문서 잘 보인다)

편집 : 계피 표가 자신의 용도에 따라 잠재적으로 좌절되는 지점을합니다. 사용할 방법을 결정하기 전에이 Stackoverflow question을 살펴보십시오.

행운을 빈다.

다른 메모 : 귀하의 의견에서 귀하는 평면도를 작성하고 있다고 설명합니다. HTML이 아닌 SVG 이미지를 사용하여 설명하는 것이 좋습니다.

출처

2014-02-26 20:58:20

레이아웃 용 테이블을 추천하지 마십시오. 불만족스러운 출처에 추가 페이지 순위를 부여하지 마십시오 (http://w3fools.com/ 참조). – cimmanon

@cimmanon 레이아웃을 위해 테이블을 사용하지 않는 이유는 무엇입니까? 그렇더라도 두 가지 다른 솔루션을 제공했습니다. w3schools를 연결하는 것에 관해서는, 나는 당신이 페이지를 읽고 그것으로 모든 문제를 발견하는 것이 좋습니다. 나는 그것을 조사하기 위해 산들 바람을 통하여 갔다. 그리고 그것은 나에게 멋지다. 그렇지 않은 경우 temple.edu에 대한 추가 링크를 제공했습니다. –

레이아웃을 위해 테이블을 사용하지 않아야하는 이유를 묻는 사람들이 아직도 몇 년이나 되었습니까? 제 말은, W3C가 [HTML 4 사양] (http://www.w3.org/TR/html401/struct/tables.html)에 돌아 오지 않는다고 말한 것 말고요? http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – cimmanon

절대 위치 지정에서 여러 div 크기 조정

답변

관련 문제