使用Css和Html制作媒体网格

时间：2015-03-06 16:38:32

标签： html css html5

enter image description here

我正在尝试为网页制作此图片，并且不确定如何使用html5和css执行此操作。任何帮助将不胜感激。

3 个答案:

答案 0 :(得分：0)

＆＃13;
＆＃13; 
<style type='text/css'>
  /* Assign this class to your image */
  #grd {
    width: 400px;
    height: 400px;
    float: left;
  }
  .grdElement {
    width: 50px;
    height: 50px;
    float: left;
    margin: 5px;
    text-align: center;
    border: 1px solid #ccc;
  }
  img{
     max-height:50px;
     max-width:50px;
  }

</style>

<div id="grd">
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
  <a class="grdElement" href="#">Image</a>
</div>
＆＃13;
＆＃13;
＆＃13;

将图像放在锚标记内。 秘诀是以相等的边距浮动所有图像，并给出图像max-width和max-height

答案 1 :(得分：0)

这是一个12个部分的网格。如果它小于480px，它将是100％宽度。

<img src="/image1" class="col l1 m4 s8">
<img src="/image2" class="col l1 m4 s8">


.col{
    float: left;
    position: relative;
    width: 100%;
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .col.s1{ width: 8.33333%; }
    .col.s2{ width: 16.66667%; }
    ...
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .col.m1{ width: 8.33333%; }
    .col.m2{ width: 16.66667%; }
    ...
}
@media only screen and (min-width: 1024px) {
    .col.l1{ width: 8.33333%; }
    .col.l2{ width: 16.66667%; }
    ...
}

我在CSS-Framework中使用它，如果你想要复制我的代码：
Description
CSS-file

答案 2 :(得分：0)

.clearfix:after {
	content: '';
	display:block;
	clear: both;
}
	
.wrapper {
	position:relative;
	width: 400px;
	margin: auto;
	border: 1px solid #767171;
	padding: 3px 6px 3px 3px;
}

.row1,
.row2,
.row3,
.row4 {
	position: relative;
	padding: 5px 5px 10px;
	margin: auto;
}
.col {
	display: inline-block;
	float: left;
	margin-right: 3%;
	min-height: 1px;
	width: 20px;
}
.col:last-child {
	margin-right: 0;
}
.square1 {
	background: #39619F;
	color: #ffffff;
	padding: 5px 6px;
}
.square2 {
	background: #20A9E1;
	color: #ffffff;
	padding: 5px 6px;
}
.square3 {
	background: #C52225;
	color: #ffffff;
	padding: 5px 6px;
}
.square4 {
	background: #E14A35;
	color: #ffffff;
	padding: 5px 6px;
}
.square5 {
	background: #050505;
	color: #ffffff;
	padding: 5px 6px;
}
.square6 {
	background: #1A7FC2;
	color: #ffffff;
	padding: 5px 6px;
}
.square7 {
	background: #688BA7;
	color: #ffffff;
	padding: 5px 6px;
}
.square8 {
	background: #EFB32A;
	color: #ffffff;
	padding: 5px 6px;
}
.square9 {
	background: #F6291A;
	color: #ffffff;
	padding: 5px 6px;
}
.square10 {
	background: #6FB2C1;
	color: #ffffff;
	padding: 5px 6px;
}
.square11 {
	background: #F00F85;
	color: #ffffff;
	padding: 5px 6px;
}
.square12 {
	background: #19B4ED;
	color: #ffffff;
	padding: 5px 6px;
}
.col1 { width: 5.58%;}
.col2 { width: 14.16%;}
.col3 { width: 22.74%;}
.col4 { width: 31.32%;}
.col5 { width: 39.9%;}
.col6 { width: 48.48%;}
.col7 { width: 57.06%;}
.col8 { width: 65.64%;}
.col9 { width: 74.22%;}
.col10 { width: 82.8%;}
.col11 { width: 91.38%;}
.col12 { width: 99.96%;}
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
	<div class="row1 clearfix">
		<div class="col col1"><span class="square1"><i class="fa fa-facebook fa-1x"></i></span></div>
		<div class="col col1"><span class="square2"><i class="fa fa-twitter fa-1x"></i></span></div>
		<div class="col col1"><span class="square3"><i class="fa fa-pinterest-p fa-1x"></i></span></div>
		<div class="col col1"><span class="square4"><i class="fa fa-google-plus fa-1x"></i></span></div>
		<div class="col col1"><span class="square5"><i class="fa fa-paw fa-1x"></i></span></div>
		<div class="col col1"><span class="square6"><i class="fa fa-linkedin fa-1x"></i></span></div>
		<div class="col col1"><span class="square7"><i class="fa fa-instagram fa-1x"></i></span></div>
		<div class="col col1"><span class="square8"><i class="fa fa-rss fa-1x"></i></span></div>
		<div class="col col1"><span class="square9"><i class="fa fa-youtube fa-1x"></i></span></div>
		<div class="col col1"><span class="square10"><i class="fa fa-wordpress fa-1x"></i></span></div>
		<div class="col col1"><span class="square11"><i class="fa fa-ellipsis-h fa-1x"></i></span></div>
		<div class="col col1"><span class="square12"><i class="fa fa-vimeo fa-1x"></i></span></div>
	</div>
	<div class="row2 clearfix">
		<div class="col col1"><span class="square1"><i class="fa fa-tumblr fa-1x"></i></span></div>
		<div class="col col1"><span class="square2"><i class="fa fa-dribbble fa-1x"></i></span></div>
		<div class="col col1"><span class="square3"><i class="fa fa-behance fa-1x"></i></span></div>
		<div class="col col1"><span class="square4"><i class="fa fa-bold fa-1x"></i></span></div>
		<div class="col col1"><span class="square5"><i class="fa fa-check fa-1x"></i></span></div>
		<div class="col col1"><span class="square6"><i class="fa fa-exclamation-triangle fa-1x"></i></span></div>
		<div class="col col1"><span class="square7"><i class="fa fa-dropbox fa-1x"></i></span></div>
		<div class="col col1"><span class="square8"><i class="fa fa-stumbleupon fa-1x"></i></span></div>
		<div class="col col1"><span class="square9"><i class="fa fa-skype fa-1x"></i></span></div>
		<div class="col col1"><span class="square10"><i class="fa fa-reddit fa-1x"></i></span></div>
		<div class="col col1"><span class="square11"><i class="fa fa-android fa-1x"></i></i></span></div>
		<div class="col col1"><span class="square12"><i class="fa fa-product-hunt fa-1x"></i></span></div>
	</div>
	<div class="row3 clearfix">
		<div class="col col1"><span class="square1"><i class="fa fa-yahoo fa-1x"></i></span></div>
		<div class="col col1"><span class="square2"><i class="fa fa-digg fa-1x"></i></span></div>
		<div class="col col1"><span class="square3"><i class="fa fa-pinterest-p fa-1x"></i></span></div>
		<div class="col col1"><span class="square4"><i class="fa fa-apple fa-1x"></i></span></div>
		<div class="col col1"><span class="square5"><i class="fa fa-pied-piper-alt fa-1x"></i></span></div>
		<div class="col col1"><span class="square6"><i class="fa fa-drupal fa-1x"></i></span></div>
		<div class="col col1"><span class="square7"><i class="fa fa-windows fa-1x"></i></span></div>
		<div class="col col1"><span class="square8"><i class="fa fa-chrome fa-1x"></i></span></div>
		<div class="col col1"><span class="square9"><i class="fa fa-firefox fa-1x"></i></span></div>
		<div class="col col1"><span class="square10"><i class="fa fa-life-ring fa-1x"></i></span></div>
		<div class="col col1"><span class="square11"><i class="fa fa-internet-explorer fa-1x"></i></span></div>
		<div class="col col1"><span class="square12"><i class="fa fa-opera fa-1x"></i></span></div>
	</div>
	<div class="row4 clearfix">
		<div class="col col1"><span class="square1"><i class="fa fa-vine fa-1x"></i></span></div>
		<div class="col col1"><span class="square2"><i class="fa fa-css3 fa-1x"></i></span></div>
		<div class="col col1"><span class="square3"><i class="fa fa-html5 fa-1x"></i></span></div>
		<div class="col col1"><span class="square4"><i class="fa fa-android fa-1x"></i></span></div>
		<div class="col col1"><span class="square5"><i class="fa fa-amazon fa-1x"></i></span></div>
		<div class="col col1"><span class="square6"><i class="fa fa-paypal fa-1x"></i></span></div>
		<div class="col col1"><span class="square7"><i class="fa fa-yelp fa-1x"></i></span></div>
		<div class="col col1"><span class="square8"><i class="fa fa-jsfiddle fa-1x"></i></span></div>
		<div class="col col1"><span class="square9"><i class="fa fa-quora fa-1x"></i></span></div>
		<div class="col col1"><span class="square10"><i class="fa fa-safari fa-1x"></i></span></div>
		<div class="col col1"><span class="square11"><i class="fa fa-ravelry fa-1x"></i></span></div>
		<div class="col col1"><span class="square12"><i class="fa fa-cogs fa-1x"></i></span></div>
	</div>
</div>
</body>
</html>

检查上面的代码。

相关问题
最新问题