3张图片排列问题到底怎么写代码?
Case:左边一张大图,右面两张同样尺寸的小图上下垂直对齐排列。左右间隔10px,同一行排列。
图片如下。请帮忙解决。谢谢
再写点样式就行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 500px;
display: flex;
}
.r{
flex: 1;
background: saddlebrown;
}
.l{
flex: 1;
height: 100%;
}
.lT{
height: 50%;
background: sandybrown;
}
.lB{
height: 50%;
background: seagreen;
}
</style>
</head>
<body>
<div class="box">
<div class="r"></div>
<div class="l">
<div class="lT"></div>
<div class="lB"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<style>
.box{
display: flex;
align-items: center;
width: 210px;
border: 1px solid red;
}
.left{
width: 100px;
height: 160px;
margin-right: 10px;
background: #dce75f;
}
.right{
display: flex;
flex-direction: column;
align-items: center;
}
.right div{
width: 100px;
height: 75px;
background: #de9d06;
}
.right :first-child{
margin-bottom: 10px;
}
</style>
<body>
<div class="box">
<div class="left">
</div>
<div class="right">
<div class=""> </div>
<div class=""> </div>
</div>
</div>
</body>
</html>
用flex布局
<style>
.main{display:flex;}
.main>div{width:50%;}
</style>
<div class="main">
<div class="bigImg"></div>
<div class="tImg">
<div class="sImg"></div>
<div class="bigImg"></div>
</div>
</div>
首先要非常感谢大虾的帮助,特别是楼上两位,后面还提供了完整的代码图。可能淘宝的代码区和html的代码不兼容的原因。尝试了无数次还是没有成功。一个小白上传个格式真不容易。谢谢大家!