如何在不使用表格，Flexbox或網格系統的情況下構建網格
[英]How to make a grid without using Tables, Flexbox or a Grid-system
問題描述
正如您在標題中看到的那樣，我想不使用表格，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>
1 個解決方案
解決方案1
0 2018-01-31 01:30:18
Bootstrap Grid-system 不使用圖像和表格作為列
[英]Bootstrap Grid-system is not working with image and table as column
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.