响应式布局网格图片

选中文字可对指定文章内容进行评论啦,绿色背景文字可以点击查看评论额。

昨天弄了一个简单的菜单的响应式布局的案例,对这一块有了一些基本的理解。今天来试试一个多个图片的响应式布局:

需求:在一个容器里面,有多个图片。如果屏幕比较大,那么就排列成两列,而小屏幕的手机排列成一列。

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="grid-style.css">
  <title>grid-img</title>
</head>
<body>
<div class="container">
	<div class="columns">
		<img src="./images/1.jpg">
	</div>
	<div class="columns">
		<img src="./images/2.jpg">
	</div>
	<div class="columns">
		<img src="./images/3.jpg">
	</div>
	<div class="columns">
		<img src="./images/2.jpg">
	</div>
	<div class="columns">
		<img src="./images/3.jpg">
	</div>
	<div class="columns">
		<img src="./images/1.jpg">
	</div>
</div>
</body>
</html>

下面是css代码:

* {
	margin:0;
	padding:0;
	box-sizing: border-box;
}

html {
	font-size:16px;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.container {
	display: flex;
	flex-wrap: wrap;
	padding: 5px;
}

.columns img{
	width: 100%;
}
.columns {
	flex: 50%;
	max-width: 50%;
	padding: 5px;
}

@media (max-width: 600px) {
	.columns {
		flex: 100%;
		max-width: 100%;
	}
}

宽屏的结果:

小屏幕的结果:

注意:这里只是基本的框架哈,具体的优化样式,根据具体的需求来。

版权声明:著作权归作者所有。

相关推荐

JavaScript检测浏览器支持的视频格式以及音频格式

不同的浏览器支持的视频/音频格式有所不同,为了在多个浏览器上兼容视频/音频的播放,需要使用JavaScript检测浏览器所支持的视频/音频格式。HTMLVideoElement和HTMLAudioElement继承于HTMLMediaElement,HTMLMediaElement的canPlayType()方法可以用来判断浏览器是否支持指定的多媒体格式。语法str = aud

Django:创建JSON响应

Django 1.7之前版本在Django1.7之前可以结合json以及HttpResponse创建json响应import json from django.http import HttpResponse response_data = {} response_data['result'] = 'er

CSS3:Flex布局

Flex是一种弹性布局,要分为两部分理解Flex:作用于容器(flex-container)的属性作用于容器里项目(flex-item)的属性Flex布局不同于块元素的垂直排列和行内元素的水平排列。Flex布局可以根据需要设定容器内的项目元素是水平还是垂直分布。设定了flex的方向后,我们就可以确定了Flex分布的主轴(main axis)以及交叉轴(cross axis)。主

[译]使用JDK 9 Flow API进行响应式编程

什么是响应式编程?响应式编程是关于处理数据项的异步流,也就是应用程序在数据项发生时对其进行响应。 数据流实质上是指随时间发生的数据项序列。与迭代内存数据相比, 这个模型的内存效率更高,因为数据是以流的形式处理的。在响应式编程模型中,有一个Publisher和一个Subscriber。 Publisher发布一个数据流,Subscriber异步订阅。该模型还提供了一种机

如何使用CSS变量让响应式变得超级简单

本文是关于如何在2018年创建响应式网站的快速教程。如果你之前没有听说过CSS变量,它就是CSS的新增功能,它让你可以在样式里使用变量的功能,而无需进行任何设置。实质上,CSS变量允许你跳过设置样式的旧方式:h1 {   font-size: 30px; } navbar > a {   font-si

Python解析http请求返回的JSON响应

python解析JSON响应可以使用以下两种方式:1、json.loadsimport json import requests response = requests.get(...) json_data = json.loads(response.text) 这种方法会把字符串转换为字典类型,这样就可以向json一样访问对象。2、r

Django响应http请求返回JSON数据

首先使用字典结构存放数据,例如返回错误信息:import json from django.http import HttpResponse response_data = {} response_data['result'] = 'error' response_data['message'] =&nb

ionic 2 图片位置

ionic 2项目的src/assets目录是用来存放资源文件,图片可以放置在/src/assets/img下,引用如下:<img src="assets/img/yourimage.jpg" alt=""> 对于之前放置的位置www/assets/img已被废弃,建议www/assets/img也迁移到src/as

CSS三栏布局——浮动

不使用定位,只使用浮动实现左右固定,中间宽度自适应布局实现关键:自适应部分一定要放在第一个位置,使用浮动,且宽度设置为100%,如果不设置为100%,浮动元素内容不够撑开整个宽度。左右固定部位,使用margin-left :负数,使其左右靠齐。中间自适应部分嵌套一个div,设置margin-left 和 margin-right 使其空出左右固定的宽度。代码如下:<!DOCTYPE HTML

CSS三栏布局——定位

这里首先让中间栏绝对定位,两边栏相对定位;这里需要注意的是,如果中间使用绝对定位,不设置宽度的话将会撑不开容器;因此,中间使用了相对定位后,同时设置margin-left和margin-right给左右两栏一定空间,然后左右两栏不管是相对定位还是绝对定位都可以,这里我们使用绝对定位:<!DOCTYPE HTML> <html lang="en-US"> <head&g