css 用flex做成田字型

news/2024/4/19 14:45:24/文章来源:https://blog.csdn.net/qq_33435149/article/details/136526905

哈喽,各位小伙伴!今天给大家来css控制div完成田字型样式,来,看看下面的效果图:

一看就知道你们想要代码了,不急。代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=<device-width>, initial-scale=1.0"><title>Document</title><style>#one {width: 250px;height: 300px;/* background: blue; */float: left;}#two {width: 250px;height: 300px;/* background: red; */}</style>
</head>
<body><div class="container" style=" justify-content: center; display: flex;"><div id="one" style=" display: flex;flex-direction: column;"><div style="height: 50%; width: 100%; display: flex; flex-direction: column"><div class="img-tip"><div class="img-tip">推至商品</div></div><div style="display: flex;align-items: center;justify-content: space-between;flex: 1;"><div style="flex: 1;height: 100%;""><img src="C:\Users\Administrator\Pictures\Screenshots\3.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 auto;" alt="Your Image"> <!-- 替换成你的图片路径 --></div><div style="flex: 1;height: 100%;""><img src="C:\Users\Administrator\Pictures\Screenshots\3.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 auto;" alt="Your Image"> <!-- 替换成你的图片路径 --></div></div></div><div style="height: 50%; width: 100%; display: flex; flex-direction: column"><div class="img-tip"><div class="img-tip">推至商品</div></div><div style="display: flex;align-items: center;justify-content: space-between;flex: 1;"><div style="flex: 1;height: 100%;display: flex;justify-content: center;align-items: center;"><img src="C:\Users\Administrator\Pictures\Screenshots\3.jpg" style="object-fit: cover; display: block; margin: 0 auto;" alt="Your Image"> <!-- 替换成你的图片路径 --></div></div></div></div><div id="two" style=" display: flex;flex-direction: column;"><div style="height: 50%; width: 100%; display: flex; flex-direction: column"><div class="img-tip"><div class="img-tip">推至商品</div></div><div style="display: flex;align-items: center;justify-content: space-between;flex: 1;"><div style="flex: 1;height: 100%;""><img src="C:\Users\Administrator\Pictures\Screenshots\1.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 auto;" alt="Your Image"> <!-- 替换成你的图片路径 --></div><div style="flex: 1;height: 100%;""><img src="C:\Users\Administrator\Pictures\Screenshots\1.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 auto;" alt="Your Image"> <!-- 替换成你的图片路径 --></div></div></div><div style="height: 50%; width: 100%; display: flex; flex-direction: column"><div class="img-tip"><div class="img-tip">推至商品</div></div><div style="display: flex;align-items: center;justify-content: space-between;flex: 1;"><div style="flex: 1;height: 100%;""><img src="C:\Users\Administrator\Pictures\Screenshots\1.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 auto;" alt="Your Image"> <!-- 替换成你的图片路径 --></div><div style="flex: 1;height: 100%;""><img src="C:\Users\Administrator\Pictures\Screenshots\1.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 auto;" alt="Your Image"> <!-- 替换成你的图片路径 --></div></div></div></div></div>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_997786.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring Boot 生成与解析Jwt

Spring Boot 生成与解析Jwt Maven依赖 <dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt</artifactId><version>0.9.1</version> </dependency>生成&解析 package yang;import io.jsonwebtoken.Claims…

黑马java-JavaSE进阶-网络编程

1.网络编程 可以让设备中的程序与网络上其他设备中的程序进行数据交互&#xff08;实现网络通信&#xff09; 2.基本通信架构 基本通信架构有两种形式&#xff1a;CS架构、BS架构 3.基本概念&#xff1a; IP&#xff1a;设备在网络中的地址&#xff0c;是唯一的标识 端口&#…

学c++对Python有帮助吗?

学习C对Python编程确实有帮助&#xff0c;尽管这两种语言在许多方面有很大的不同。以下是学习C可能对Python编程产生帮助的几个方面&#xff1a; 理解底层概念&#xff1a;C是一种更接近硬件的编程语言&#xff0c;它要求程序员更深入地理解内存管理、指针、数据类型等底层概念…

【Proteus仿真】【51单片机】坐姿矫正提醒器设计

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真51单片机控制器&#xff0c;使用LCD1602液晶显示模块、HC-SR04超声波模块、蜂鸣器、按键、人体红外传感器等。 主要功能&#xff1a; 系统运行后&#xff0c;LCD1602显示超声波检…

Android fragment的使用案例

效果图&#xff1a;两个点击事件&#xff0c;显示不同的fragment布局 默认是如下图&#xff0c;点击页面一也如下图 点击页面二如下图&#xff1a; Android Fragment的生命周期是与其所在的Activity紧密相关的。当一个Fragment被添加到Activity中时&#xff0c;它将经历一系列…

Android使用WebView打开网页链接(内嵌H5网页)的两种方式之一

发布Android应用&#xff0c;除了用原生开发外&#xff0c;更多是采用内嵌H5网页的方式来做&#xff0c;便于更新以及多平台使用。 一、第一种方式是直接通过WebView打开外部H5链接。 新建Android工程 直接创建一个工程&#xff0c;点击运行就可以了&#xff0c;打开是个空页…

大路灯护眼灯哪个牌子好?精心挑选五款大路灯,无广分享

当前&#xff0c;大路灯作为一种良好帮助改善光线环境的工具&#xff0c;受到了广泛关注&#xff0c;并以其卓越的光线舒适度功能赢得了许多用户的青睐。然而&#xff0c;其迅速增长的人气也伴随着一些负面反响&#xff0c;其中包括了关于可能对眼睛造成损伤和健康风险的报道。…

代码之旅:我的算法探索之路(二)力扣 最接近的三数之和

目录 LeetCode 第16题 最接近的三数之和 题目 解题思路 代码 结果 LeetCode 第18题 四数之和 题目 解题思路 代码 结果 LeetCode 第16题 最接近的三数之和 题目 给你一个长度为 n 的整数数组 nums 和 一个目标值 target。请你从 nums 中选出三个整数&#xff0c;使…

TCP传输收发

TCP通信: TCP发端: socket connect send recv close TCP收端: socket bind listen accept send recv close 1.connect int connect(int sockfd, const struct sockaddr *addr, socklen_t ad…

HTML5:七天学会基础动画网页9

在进行接下来的了解之前我们先来看一下3d的xyz轴&#xff0c;下面图中中间的平面就相当于电脑屏幕&#xff0c;z轴上是一个近大远小的效果。 3d转换属性 transform 2D或3D转换 transform-origin 改变旋转点位置 transform-style 嵌套元素在3D空间如何显 …

IM聊天交友APP源码IM带音视频Uniapp即时通讯安卓苹果APP修改二开

前端开发语言&#xff1a;VUE&#xff08; 安卓&#xff0c;IOS,WEB为一套前端代码&#xff09; 服务器端开发语言: PHPWebSocket 数据库&#xff1a;MySql mongodb 前端打包工具&#xff1a;Hbuilder 服务器搭建工具&#xff1a;宝塔 Xshell 短信接口&#xff1a; 支持…

DxO PureRAW:赋予RAW图像生命,打造非凡视觉体验 mac/win版

DxO PureRAW 是一款专为RAW图像处理而设计的软件&#xff0c;旨在帮助摄影师充分利用RAW格式的优势&#xff0c;实现更加纯净、细腻的图像效果。该软件凭借其强大的功能和易于使用的界面&#xff0c;成为了RAW图像处理领域的佼佼者。 DxO PureRAW 软件获取 首先&#xff0c;Dx…

R语言,实现MACD指标计算:股票技术分析的利器系列(1)

R语言&#xff0c;实现MACD指标计算&#xff1a;股票技术分析的利器系列&#xff08;1&#xff09; MACD指标代码完整代码介绍代码EMA函数calculate_DEA 函数calculate_MACD 函数 运行结果 MACD指标 先看看官方介绍&#xff1a; MACD (平滑异同平均线&#xff09; 指标说明 DI…

【C语言基础】:深入理解指针(三)

文章目录 深入理解指针一、冒泡排序二、二级指针三、指针数组3.1 指针数组模拟二维数组 四、字符指针变量五、数组指针变量5.1 数组指针变量是什么&#xff1f;5.2 数组指针变量的初始化 六、二维数组传参的本质 深入理解指针 指针系列回顾&#xff1a; 【C语言基础】&#xf…

苹果怎么录屏?简单步骤教你一键搞定

随着科技的发展&#xff0c;智能手机的普及&#xff0c;越来越多的用户开始使用手机来录制屏幕。尤其是在苹果手机上&#xff0c;可是很多用户不知道苹果怎么录屏。本文将详细介绍苹果手机的内置录屏方法&#xff0c;通过详细的步骤指导&#xff0c;教你如何进行屏幕录制。 苹果…

基本设计模式

单例模式 ES5 function Duck1(name:string){this.namenamethis.instancenull }Duck1.prototype.getNamefunction(){console.log(this.name) }Duck1.getInstancefunction(name:string){if(!this.instance){this.instance new Duck1(name)} } const aDuck1.getInstance(a) const…

java当中的栈和队列

一、Java中的栈 1.常用方法 注意上面的peek()方法和pop()方法的区别&#xff01; 2.实例 import java.util.Stack; public class StackTest { public static void main(String[] args) { Stack<String> stack new Stack<String>(); System.out.println(&qu…

微信小程序开发系列(二十二)·wxml语法·双向数据绑定model:的用法

目录 1. 单向数据绑定 2. 双向数据绑定 3. 代码 在 WXML 中&#xff0c;普通属性的绑定是单向的&#xff0c;例如&#xff1a;<input value"((value))"/> 如果希望用户输入数据的同时改变 data 中的数据&#xff0c;可以借助简易双向绑定机制。在对应属性…

Redis分段锁,如何设计?

问题场景&#xff1a;热点库存扣减问题 秒杀场景&#xff0c;有一个难度的问题&#xff1a;热点库存扣减问题。 既要保证不发生超卖 又要保证高并发 如果解决这个高难度的问题呢&#xff1f; 答案就是使用redis 分段锁。 什么是分布式锁&#xff1f; 一个分布式系统中&am…

数字社交时代的引领者:Facebook的元宇宙探索

引言&#xff1a; 在当今数字社交时代&#xff0c;人们的社交方式正在经历着翻天覆地的变化。随着虚拟现实技术的不断发展和元宇宙概念的崛起&#xff0c;社交网络正朝着一个全新的未来迈进。作为全球最大的社交网络平台之一&#xff0c;Facebook正在积极探索元宇宙时代的社交…