비정상적인 구조의 테이블 만들기 (html, css, js?)

-1

HTML 테이블, div 또는 JavaScript를 사용하여 아래 구조를 표시하고 싶습니다.비정상적인 구조의 테이블 만들기 (html, css, js?)

image with unsusual structure

어떻게 이런 짓을 했을까?

2016-06-08 yeryr

벽돌을보세요 : http://masonry.desandro.com/ – JoostS

예 ... 블록을 오른쪽 상단 모서리에 고정시키고 싶지만 "스탬프"가 작동하지 않습니다 (왼쪽 여백이 보이지 않음). 좋은). 그래서 나는 CSS를 사용하기로 결정했다. – yeryr

CSS 위치 속성을 사용하면이 사실을 알 수 있습니다. 절대로 설정하면 CSS의 top, right, left 및 bottom 속성을 사용하여 모든 div 태그를 쉽게 배치 할 수 있습니다. 나는 이런 식으로했다 :

body, html { 
 
\t height: 100%; 
 
\t width: 100%; 
 
} 
 

 
div { 
 
\t display: block; 
 
\t position: absolute; 
 
\t margin: 5px; 
 
\t border: 5px solid red; 
 
} 
 

 
#A { 
 
\t width: calc(75% - 20px); 
 
\t height: calc(25% - 20px); 
 
\t top: 0; 
 
\t left: 0; 
 
} 
 

 
#B { 
 
\t width: calc(25% - 20px); 
 
\t height: calc(50% - 20px); 
 
\t top: 0; 
 
\t right: 0; 
 
} 
 

 
#C { 
 
\t width: calc(50% - 20px); 
 
\t height: calc(25% - 20px); 
 
\t top: 25%; 
 
\t left: 0; 
 
} 
 

 
#D { 
 
\t width: calc(25% - 20px); 
 
\t height: calc(50% - 20px); 
 
\t top: 25%; 
 
\t right: 25%; 
 
} 
 

 
#E { 
 
\t width: calc(25% - 20px); 
 
\t height: calc(25% - 20px); 
 
\t right: 0; 
 
\t bottom: 25%; 
 
} 
 

 
#F { 
 
\t width: calc(25% - 20px); 
 
\t height: calc(50% - 20px); 
 
\t bottom: 0; 
 
\t left: 0; 
 
} 
 

 
#G { 
 
\t width: calc(25% - 20px); 
 
\t height: calc(50% - 20px); 
 
\t bottom: 0; 
 
\t left: 25%; 
 
} 
 

 
#H { 
 
\t width: calc(50% - 20px); 
 
\t height: calc(25% - 20px); 
 
\t right: 0; 
 
\t bottom: 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>Unsusual structure</title> 
 
\t <link href="unsusual.css" type="text/css" rel="stylesheet"> 
 
</head> 
 
<body> 
 
\t <div id="A"></div> 
 
\t <div id="B"></div> 
 
\t <div id="C"></div> 
 
\t <div id="D"></div> 
 
\t <div id="E"></div> 
 
\t <div id="F"></div> 
 
\t <div id="G"></div> 
 
\t <div id="H"></div> 
 
</body> 
 
</html>

이 도움이 희망을! :

출처

2016-06-08 20:05:44 Lonkey

table은 table의 전제가 균등하게 간격을 둔 격자이기 때문에 의미가 없습니다.

JavaScript가 필요하지 않으므로 일반 CSS로 수행 할 수없는 JavaScript로 수행 할 수있는 작업은 없습니다.

당신이 원하는 것은 inline-block의 묶음으로 일정한 범위 내에서 제약을 가하는 컨테이너 내에서 미리 정의 된 크기를 가지며이를 랩 어라운드하여 함께 맞출 수 있습니다.

구체적으로 말하자면, 나는 당신이 당신의 일에 어떤 종류의 시도를하고, 필요하다면 어떻게 작동하는지에 대해 신중한 질문을해야한다고 생각합니다.

"자동차를 만드는 방법"을 묻는 질문과 같이, 먼저 정비사 수업을 듣고 문제가 생겼을 때 언제든지 질문 할 수 있습니다.

출처

2016-06-08 23:30:27 JackHasaKeyboard

비정상적인 구조의 테이블 만들기 (html, css, js?)

답변

관련 문제