절대 위치 지정 및 부동

Question

나는 현실을 만들려고 노력하는 다소 특이한 레이아웃을 가지고 있습니다. 인수를 위해 div가 포함되어 있으며 래퍼의 왼쪽과 상단에서 200px로 고정해야합니다.

나는 모든이 떠 될 정사각형 이미지의 컬렉션이 브라우저 윈도우의 가장자리에 계속하고, 절대 위치 DIV 감싸는. 절대 위치 지정은 문서 흐름에서 div를 빼내는 것을 의미합니다. 즉,이 문제에 대한 간단한 해결책을 생각할 수 없습니다.

누구나 이런 종류의 문제를 해결했습니다. 잠재적으로 자바 스크립트?

편집 : link

Answer 1

난 당신이 더 많은 유연성을 원하는 같은데요,하지만 디자인은 합리적으로 해결 된 경우 단지의 경우, 당신은 단지 3 열 (컨테이너 div)를 사용할 수 있습니다 및 열 당에서 모두 정렬합니다.

당신의 HTML이 고정되어있는 경우, 당신은 자바 스크립트를 사용할 수 있지만 어떤 기성품 솔루션을 알고하지 않습니다.

나는 아마 수학을 더미 이미지를 삽입하는 자바 스크립트를 사용합니다/올바른 위치에서 블랙 박스 뒤에 요소 (블랙 박스 유지는 절대 위치). 당신은 또한 그 서버 쪽을 할 수 있습니다.

Answer 2

편집 : 여기에 거친 레이아웃의 이미지에서 심사, 나는 개인적으로 테이블을 사용합니다. 그러나, 수레을 달성 할 수 있습니다

(이미지 : http://i.stack.imgur.com/KAqxZ.png)

을

<style> 
#cont { 
    width: 100px; 
} 
.small { 
    float:left; 
    height:25px; 
    width:25px; 
    background-color:#00F; 
} 
.big { 
    float:left; 
    height:50px; 
    width:50px; 
    background-color:#F00; 
} 
.long { 
    float:left; 
    height:50px; 
    width:25px; 
    background-color:#F0F; 
} 
.long .small { 
    background-color:#F0F; 
} 
</style> 

<div id="cont"> 
    <div class="small"></div> 
    <div class="small"></div> 
    <div class="small"></div> 
    <div class="small"></div> 
    <div class="long"> 
    <div class="small"></div> 
    <div class="small"></div> 
    </div> 
    <div class="big"></div> 
    <div class="small"></div> 
    <div class="small"></div> 
</div> 

---

원본 : 그러나

<div class="absolute-wrapper"> 
    <div><!-- whatever content you intended for the absolute div... --></div> 
    <div class="float-left">...</div> 
    <div class="float-left">...</div> 
    ... 
</div> 

:

나는 같은 것을 할 것 , 절대적으로 배치 된 요소가 아닌 다른 솔루션을 검색하는 것이 좋습니다. 그들은 쉽게 유지할 수 없게됩니다.

Answer 3

당신은 캔버스 요소와이 작업을 수행 할 수 있지만, 그것은 단점이있다. 당신은 자바 스크립트에 따라 달라집니다, 당신은 자바 스크립트에서 모든 위치를해야합니다.

도움이되지는 않지만이 정확한 디자인이 얼마나 중요한지 고려해야한다고 생각합니다. 왜냐하면 오늘날의 HTML은 실제로 이러한 유형을 위해 구축 된 것이 아니기 때문에 단순한 솔루션이 없다고 생각하기 때문입니다. 의 레이아웃. 이러한 예비 적 기능을 작성

: 미래는 자바 스크립트를 사용하여

Answer 4

이/jQuery를, 그것은 다음과 같은 의사 코드의 논리를 사용하여 수행 할 수 ... 다중 열 및 인 flexbox 같은 것들을 우리에게 제공하지만 약속하고 단계 ....

1 단계 : 클래스가 fakeSquare 이름이있는 DOM에서 모든 div를 제거합니다. 예 :

$('.fakeSquare').remove(); 

2 단계 : 한 행의 빨간색 div 수를 계산합니다. 이 번호는 squaresPreRow에 저장하십시오. 다음과 같이 입력하십시오 : var squaresPreRow = floor(window width/square width).

단계 3 : squaresPreRow + 1 붉은 사각 div 다음에 두 개의 빈 div를 추가하십시오. 같은 ...

$("div.redSquare") 
    .index(squaresPreRow + 1) 
    .append("<div class="fakeSquare redSquare"></div><div class="fakeSquare redSquare"></div>"); 

4 단계 : 다시 그리고 ...

$("div.redSquare") 
    .index((squaresPreRow * 3) + 1) 
    .append("<div class="fakeSquare redSquare"></div><div class="fakeSquare redSquare"></div>"); 

마지막으로 : 세 번째 행에 대한 평방 또 다른 2 ...

$("div.redSquare") 
    .index((squaresPreRow * 2) + 1) 
    .append("<div class="fakeSquare redSquare"></div><div class="fakeSquare redSquare"></div>"); 

5 단계 추가 DOM이 준비가되었을 때나 윈도우가 바뀔 때마다이 함수를 호출하고 싶다.

일부 조정이 필요할 수 있지만 잘하면 시작할 수 있습니다.