正如您在标题中看到的那样,我想在不使用表格、Flexbox 或网格系统的情况下制作网格。但是可以使用浮动。 它应该看起来像这样(不关心确切的颜色):
我找过类似的主题,但没有找到任何可以帮助我的东西。
我要改变什么,它看起来像上图? 那是我当前的代码:
/* ########################################################################## */
/* Global Settings */
/* ########################################################################## */
html, body{
width: 100%;
height:100%;
font-family: Arial, sans-serif;
font-size: 16px;
}
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
/* ########################################################################## */
/* Clearfix-Hack */
/* ########################################################################## */
.clearfix::after{
content:"";
clear:both;
display: block;
}
/* ########################################################################## */
/* Entire Page */
/* ########################################################################## */
.entire-page{
margin: 0 15%;
}
/* ########################################################################## */
/* Square/Rectangle */
/* ########################################################################## */
.square,
.div{
width: calc((100% - 60px) / 3);
float: left;
}
.div{
height:422px;
}
.rectangle {
width: calc((100% - 60px) / 3 * 2 + 30px);
float: left;
}
.row{
margin-bottom: 30px;
}
.row .square:nth-of-type(1) {
margin-right: 30px;
}
.row .square:nth-of-type(3) {
margin-left: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="src/css/styles4.css">
</head>
<body>
<!-- ########################################################################## -->
<!-- Entire Page -->
<!-- ########################################################################## -->
<div class="entire-page">
<!-- ########################################################################## -->
<!-- Square/Rectangle -->
<!-- ########################################################################## -->
<section>
<div>
<div class="row row-1">
<div class="square pic1"><img src="https://www1.xup.in/exec/ximg.php?fid=56589964"></div>
<div class="square pic1"><img src="https://www1.xup.in/exec/ximg.php?fid=56589964"></div>
<div class="square div"></div>
</div>
<div class="row row-2">
<div class="rectangle pic2"><img src="https://www1.xup.in/exec/ximg.php?fid=19960346"></div>
<div class="square div"></div>
</div>
</div>
</section>
</div>
</body>
</html>
你可以使用。有 2 行 - 即
<tr>'s
。第一行有 3 列 - 即 <td>'s.
第二行只有 2 <td>'s
,而该行的第一行有一个 colspan=2.
在这里阅读更多关于表格的信息.
根据需要应用样式。
您可以仅依靠以下属性来做到这一点:位置、顶部、左侧、底部和右侧,以便设置正确的位置来分配网格中的每个图块。 HTML文件:
<section class="container">
<div class="gray-tile tile1"></div>
<div class="gray-tile tile2"></div>
<div class="gray-tile tile3"></div>
<div class="orange-tile tile4"></div>
<div class="gray-tile tile5"></div>
</section>
CSS文件:
:root {
--tile-gap: 10px;
--side: 200px;
}
.container {
margin: 2px;
padding: 20px;
position: relative;
}
.orange-tile {
background-color: orangered;
width: calc( var(--side) + var(--side) + var(--tile-gap) );
height: var(--side);
}
.gray-tile {
background-color: gray;
width: var(--side);
height: var(--side);
}
.tile1 {
position: absolute;
top: 0;
left: 0;
}
.tile2 {
position: absolute;
top: 0;
left: calc( var(--side) + var(--tile-gap));
}
.tile3 {
position: absolute;
top: 0;
left: calc( var(--side) * 2 + var(--tile-gap) * 2 );
}
.tile4 {
position: absolute;
top: calc( var(--side) + var(--tile-gap));
left: 0;
}
.tile5 {
position: absolute;
top: calc( var(--side) + var(--tile-gap));
left: calc( var(--side) * 2 + var(--tile-gap) * 2 );
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StackOverflow</title>
<style>
:root {
--tile-gap: 10px;
--side: 200px;
}
.container {
margin: 2px;
padding: 20px;
position: relative;
}
.orange-tile {
background-color: orangered;
width: calc( var(--side) + var(--side) + var(--tile-gap) );
height: var(--side);
}
.gray-tile {
background-color: gray;
width: var(--side);
height: var(--side);
}
.tile1 {
position: absolute;
top: 0;
left: 0;
}
.tile2 {
position: absolute;
top: 0;
left: calc( var(--side) + var(--tile-gap));
}
.tile3 {
position: absolute;
top: 0;
left: calc( var(--side) * 2 + var(--tile-gap) * 2 );
}
.tile4 {
position: absolute;
top: calc( var(--side) + var(--tile-gap));
left: 0;
}
.tile5 {
position: absolute;
top: calc( var(--side) + var(--tile-gap));
left: calc( var(--side) * 2 + var(--tile-gap) * 2 );
}
</style>
</head>
<body>
<section class="container">
<div class="gray-tile tile1"></div>
<div class="gray-tile tile2"></div>
<div class="gray-tile tile3"></div>
<div class="orange-tile tile4"></div>
<div class="gray-tile tile5"></div>
</section>
</body>
</html>