1. 首頁
  2. 問答
  3. 如何創建具有不尋常結構的表格（html，css，js？）

如何創建具有不尋常結構的表格（html，css，js？）

2016-06-08 57 views

回答

1

你可以通過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

1

A table沒有意義，因爲table的前提是一個均勻間隔的網格。

JavaScript不是必需的，JavaScript沒有任何東西可以用普通的CSS來完成。

你想要的是一組inline-block元素，它們在容器中具有預定義的大小，將它們限制在一定範圍內並使它們環繞並以這種方式組合在一起。

至於具體做到這一點，我認爲你應該做出某種嘗試，然後回過頭來考慮一下如果需要的話，如何工作。

這有點像問我「如何建立一輛車」，首先需要一個機械師班，如果遇到問題，可隨時提問。

來源

2016-06-08 23:30:27 JackHasaKeyboard

相關問題

 相關問題