如何制作3x2网格？

时间：2016-10-08 14:22:03

标签： html css grid

我们现在有这个，但必须是这样的：

https://postimg.org/image/cw2e572zh/

我在学校这样做，我无法弄清楚这些列是2x3而不是3x2。

http://prntscr.com/crc7ln

＆＃13;
＆＃13; 
<!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">  
		<div class="col1">  
			<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>  
		</div>  
		<div class="col2">  
			<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>  
		</div>  
		<div class="col3">  
			<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>  
		</div>  
	</div>  
	<div class="row">  
		<div class="col1">  
			<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>  
		</div>  
		<div class="col2">  
			<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>  
		</div>  
		<div class="col3">  
			<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>  
		</div>  
	</div>  
</div>  

</body>  
</html>
＆＃13;
＆＃13;
＆＃13;

＆＃13;
＆＃13; 
/* CSS */

.row {
   float: left;
   position: relative;
   box-sizing: border-box;
   width: 24%;
   padding-left: 10px;
}
	
.col1 {
   left: 5px;
   border: 2px solid black;
   margin-bottom: 10px;
}
    	
.col2 {
   left: 15px;
   border: 2px solid black;
   margin-bottom: 20px;
}
    	
.col3 {
    left: 25px;
    border: 2px solid black;
}
    	
body {
    border-width: 0px;
    padding: 0px;
    margin: 0px;
    font-size: 90%;
    background-color: #e7e7de
}
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：0)

你确实意识到你有2个div，里面有3个div ...非常合乎逻辑的你有2x3而不是3x2，也许你想要3个div，里面有2个div？

答案 1 :(得分：0)

在这里，你试着避免漂浮物，因为它们似乎会弄乱你的div有时流动的方式。我已经将24%应用于列而不是行，我也取出了重复的样式声明。我建议在列上放置相同的类而不是col1，col2和col3

＆＃13;
＆＃13; 
<!DOCTYPE HTML>  
<html>
<head>  
<meta charset=utf-8>  
<title>HTML CSS exercise - create a CSS Grid</title>  
<style>
	.row {
		box-sizing: border-box;
		padding-left: 10px;
	}

	
	.col1, .col2, .col3 {
		left: 5px;
		border: 2px solid black;
		margin-bottom: 10px;
		display: inline-block;
		padding: 5px;
		width: 24%;
	}
  
	body {
		border-width: 0px;
		padding: 0px;
		margin: 0px;
		font-size: 90%;
		background-color: #e7e7de
}
</style>  
</head>  
<body>  
<div class="container">  
	<div class="row">  
		<div class="col1">  
			<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>  
		</div>  
		<div class="col2">  
			<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>  
		</div>  
		<div class="col3">  
			<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>  
		</div>  
	</div>  
	<div class="row">  
		<div class="col1">  
			<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>  
		</div>  
		<div class="col2">  
			<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>  
		</div>  
		<div class="col3">  
			<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>  
		</div>  
	</div>  
</div>  

</body>  
</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

应用这些样式，减少代码量。

<style>  
.row {
    border:1px solid red;
    float:left;  
}
.column{
  float:left;
  margin:10px;
  border:1px solid black;
  width:24%;
}
.clear{clear:both;}

具有以下HTML结构

<div class="container">
    <div class="row">
        <div class="column">
            <p>loren ipsum</p>
        </div>
        <div class="column">
            <p>loren ipsum</p>
        </div>
        <div class="column">
            <p>loren ipsum</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="row">
        <div class="column">
            <p>loren ipsum</p>
        </div>
        <div class="column">
            <p>loren ipsum</p>
        </div>
        <div class="column">
            <p>loren ipsum</p>
        </div>
    </div>
</div>
相关问题
最新问题