Tôi đang làm việc trên một vài dự án để cải thiện HTML và CSS của mình. Một trong số đó là một trình giải Sudoku đơn giản. Tôi cần tạo một Grid để đặt Labels hoặc TextBoxes. Tôi muốn bố cục lưới chính xác như hình ảnh Lưới trong số question này.CSS - Cách tốt nhất để tạo lưới Sudoku 9x9 là gì?
Cách tốt nhất để đạt được điều này là gì? CSS ... hoặc bảng? Và làm thế nào tôi sẽ đi về việc tạo ra điều này?
Nếu đó là dữ liệu dạng bảng, bạn có thể sử dụng bảng. Nếu bạn muốn gắn bó với DIV, bạn có thể làm điều đó một cách dễ dàng bằng cách thiết lập các giá trị chiều rộng/chiều cao cụ thể cho mỗi khối gốc và các hình con con, và đơn giản là thả chúng sang trái/phải. Chỉ cần chắc chắn sử dụng các clear fix để giữ cho nội dung chảy qua các thẻ anh chị em của họ nếu bạn quyết định không sử dụng giá trị chiều rộng/chiều cao rõ ràng.
#sudoku {
width:297px;
height:297px;
}
.parentCube {
width:99px;
height:99px;
float:left;
}
.childCube {
width:33px;
height:33px;
float:left;
}
<div id="sudoku">
<div class="parentCube">
<div class="childCube"></div>
<div class="childCube"></div>
<div class="childCube"></div>
<div class="childCube"></div>
<div class="childCube"></div>
<div class="childCube"></div>
<div class="childCube"></div>
<div class="childCube"></div>
<div class="childCube"></div>
</div>
<div class="parentCube">
<div class="childCube"></div>
<div class="childCube"></div>
<div class="childCube"></div>
<div class="childCube"></div>
<div class="childCube"></div>
<div class="childCube"></div>
<div class="childCube"></div>
<div class="childCube"></div>
<div class="childCube"></div>
</div>
<div class="parentCube">
<div class="childCube"></div>
<div class="childCube"></div>
<div class="childCube"></div>
<div class="childCube"></div>
<div class="childCube"></div>
<div class="childCube"></div>
<div class="childCube"></div>
<div class="childCube"></div>
<div class="childCube"></div>
</div>
</div>
Wow Jonathan Sampson là NHANH và xứng đáng nhận được tín dụng! Đây là cách tiếp cận của tôi:
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sudoku</title>
<style type="text/css">
#playfield{
width:920px;
height:920px;
}
#playfield div{
width:300px;
height:300px;
float:left;
border:1px solid #ff8a00;
}
#playfield span{
font-size:300%;
width:98px;
height:98px;
float:left;
display:block;
border:1px solid white;
text-align:center;
line-height:99px;
background-color:#f2f2f2;
}
#playfield span:hover{
background-color:#0d2f5a;
color:white;
}
</style>
</head>
<body>
<div id="playfield">
<div>
<span id="position_1">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
<div>
<span>...</span>
</div>
</div>
</body>
</html>
Cảm ơn vì điều đó, bạn nên xem nhiều giải pháp! Tôi nghĩ tôi thích cái này sạch hơn, nhưng như bạn nói, Jon nhanh hơn. – GenericTypeTea
Theo tôi, bạn nên đánh dấu câu trả lời này là được chấp nhận, khi bạn thích nó. Việc chấp nhận không bị ràng buộc với câu trả lời nhanh nhất. – tanascius
Cảm ơn điều đó, nhưng sửa chữa rõ ràng là gì? – GenericTypeTea
Xin lỗi, nếu bạn sử dụng chiều cao rõ ràng trên vùng chứa chính, bạn sẽ không cần phải sử dụng "sửa chữa rõ ràng". Nhưng chỉ để đạt được cá nhân, sửa chữa rõ ràng là không có gì hơn là thêm một DIV bên dưới các yếu tố được thả nổi. Đó là div mới sẽ có "rõ ràng: cả hai" để đảm bảo rằng các yếu tố nổi không trùng lặp bất cứ điều gì họ trước. – Sampson
+1 để sử dụng bảng. Đây là dữ liệu dạng bảng. –