0
我們現在有這個權利，但它必須是這樣的：如何製作3x2網格？
https://postimg.org/image/cw2e572zh/
我這樣做是爲學校，我不能算出它的列保持爲2×3和3×沒有。
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>HTML CSS exercise - create a CSS Grid</title>
</head>
<body>
<div class="container">
<div class="row">
\t \t <div class="col1">
\t \t \t <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
\t \t </div>
\t \t <div class="col2">
\t \t \t <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
\t \t </div>
\t \t <div class="col3">
\t \t \t <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
\t \t </div>
\t </div>
\t <div class="row">
\t \t <div class="col1">
\t \t \t <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
\t \t </div>
\t \t <div class="col2">
\t \t \t <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
\t \t </div>
\t \t <div class="col3">
\t \t \t <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
\t \t </div>
\t </div>
</div>
</body>
</html>/* CSS */
.row {
float: left;
position: relative;
box-sizing: border-box;
width: 24%;
padding-left: 10px;
}
\t
.col1 {
left: 5px;
border: 2px solid black;
margin-bottom: 10px;
}
\t
.col2 {
left: 15px;
border: 2px solid black;
margin-bottom: 20px;
}
\t
.col3 {
left: 25px;
border: 2px solid black;
}
\t
body {
border-width: 0px;
padding: 0px;
margin: 0px;
font-size: 90%;
background-color: #e7e7de
}
的結構如下，我們修復它現在非常感謝！ （我們是html/css的初學者，所以：P）謝謝！ ：D – SelectThat
很好聽，不客氣。既然這爲你解決了這個問題，你應該將我的答案標記爲解決方案，以便人們知道這個問題已經解決了。祝你好運:) – Kevin
這是一個造型問題，而不是一個HTML問題，請參閱我的答案解決方案 – Elena