Question

我想创建一个类似画廊的主页，其中7列各有不同的宽度。

这是我尝试创建的内容的预览：

Answer 1

一种方法是使用Bootstrap-
检查this link。
如果您知道如何使用Bootstrap，则只需操纵列数即可调整整个屏幕例如，每个框架的列将适合-1,1,2,2,3,2,1（但这看起来很无聊）。

另一种方法是获取屏幕的宽度，并通过指定您希望它在屏幕上具有的所需比例（以百分比表示）将其划分为7个不同的列。但是你必须确保它们总和达到100％例如 - 每张照片的宽度将占据屏幕的百分比 - 10,8,15,12,30,15,10

在您的CSS中，您可以为图像应用白色边框，并相应地设置您希望它具有的高度。
如果我的问题出错或错过了某些内容，请与我联系。

Answer 2

您可以创建自己的7列网格系统。将屏幕分为7个部分，然后宽度为：每列：％的1/7 代码：

.col1{width:14.28%;}//% of 1/7
.col2{width:..%;}//% of 2/7
.col3{width:..%;}//% of 3/7
.col4{width:..%;}//% of 4/7
.col5{width:..%;}//% of 5/7
.col6{width:..%;}//% of 6/7
.col7{width:100%;}//% of 7/7

代替..把百分比。这样您就可以创建自己的7列网格系统。

您也可以使用bootstrap执行此操作，但它使用的是12列网格系统。

Answer 3

您应该能够使用更新的仅支持CSS和HTML的解决方案，例如Flexbox。如果需要，应该有较旧的浏览器支持shiv。

Flexbox

还有Grid，因为当你想要更复杂的东西时： Grid

Answer 4

你可以试试这个，这是使用bootstrap创建的

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<title></title>
</head>
<body>
<div class="col-md-12" style="color:red;height:500px">
<div class="col-md-1" style="height:100%;padding:0px;" >
	<div style="background-color:red;height:40%;margin-top:5px;;"></div>
	<div style="background-color:red;height:20%;margin-top: 5px"></div>
</div>
<div class="col-md-2" style="height:100%;padding:0px;">
	<div style="background-color:red;height:30%;margin:5px"></div>
	<div style="background-color:red;height:20%;margin: 5px"></div>
</div>
<div class="col-md-2" style="height:100%;padding:0px;">
	<div style="background-color:red;height:10%;margin:5px"></div>
	<div style="background-color:red;height:30%;margin: 5px"></div>
	<div style="background-color:red;height:10%;margin:5px"></div>
	<div style="background-color:red;height:20%;margin: 5px"></div>
</div>
<div class="col-md-1" style="background-color:red;height:100%;margin: 5px"></div>
<div class="col-md-2" style="background-color:red;height:100%;margin: 5px"></div>
<div class="col-md-2" style="background-color:red;height:100%;margin: 5px"></div>
<div class="col-md-1" style="background-color:red;height:100%;margin: 5px"></div>
</div>
</body>
</html>

检查代码段中的整页

如何创建具有不同列宽的网格

4 个答案: