如何使用HTML和CSS制作4x1图像布局？ [英] How to make a 4x1 image layout with HTML and CSS?
问题描述
我是编程的新手，并且一直在寻找这一天，但似乎无法找到答案。如何将4张图片分成一排？就像这样但有四张图片：
https://codepen.io/bradtraversy/pen/dJzzdB
例如：
（图片）...........（图片）............（图片）....... .....（图片）
（按钮）...........（按钮）......... 。（按钮）...........（按钮）
谢谢:)
我尝试过：
i'm new to programming and have been looking all day for this, but can't seem to find the answer. How do I divide 4 pictures on a row? Just like this but with four pictures:
https://codepen.io/bradtraversy/pen/dJzzdB
example:
(Image)...........(image)............(image)............(image)
(button)...........(Button)..........(button)...........(button)
Thank you :)
What I have tried:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Meg</title>
<link rel="stylesheet" href="masterp2.css">
</head>
<body>
<div class="container">
<div class="split left">
<button type="button" name="btnl">Mer info</button>
</div>
<div class="split right">
<button type="button" name="btnr">Mer info</button>
</div>
<div class="split rightmiddle">
<button type="button" name="btnm">Mer info</button>
</div>
</div>
<div class="split leftmiddle">
<button type="button" name="btnlm">Mer info</button>
</div>
</div>
</body>
</html>
html, body{
margin: 0;
padding: 0;
}
button{
background: none;
color: #ccc;
width: 150px;
height: 80px;
border: 1px solid #338033;
font-size: 18px;
border-radius: 4px;
transition: .6s;
overflow: hidden;
}
button:hover{
background: #338033;
cursor: pointer;
outline: none;
}
.split.left button{
top: 50%;
position: absolute;
left: 25%;
transform: translate(-15%, -50%);
}
.split.right button{
top: 50%;
position: absolute;
right: 25%;
transform: translate(-15%, -50%);
}
.split.middle button{
top: 50%;
position: absolute;
right: 25%;
transform: translate(-25%, -50%);
}
.split.leftmiddle button{
top: 50%;
position: absolute;
left: 25%;
}
.split{
width: 25%;
height: 100%;
overflow: hidden;
position: fixed;
top: 0;
overflow-x: hidden;
}
.split.left{
left: 0;
background: url('https://image.ibb.co/m3ZbRb/programmer.png') center center no-repeat;
background-size: cover;
}
.split.right{
right: 0;
background: url('https://images.pexels.com/photos/860564/pexels-photo-860564.jpeg?auto=compress&cs=tinysrgb&h=650&w=940') center no-repeat;
background-size: cover;
}
.split.middle{
right: 30;
background: url('https://images.pexels.com/photos/1133957/pexels-photo-1133957.jpeg?auto=compress&cs=tinysrgb&h=650&w=940') center center no-repeat;
background-size: cover;
}
.split.leftmiddle{
left: 25;
background: url('https://images.pexels.com/photos/414391/pexels-photo-414391.jpeg?auto=compress&cs=tinysrgb&h=350') center no-repeat;
background-size: cover;
}
推荐答案
我正在使用 liveweave [ ^ ]
它应该有效。如果您遇到任何问题，请随时问我。
这将是我的方法..
HTML
I'm using liveweave[^]
it should work. In case you face any problem feel free to ask me.
This would be my approach..
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Meg</title>
<link rel="stylesheet" href="masterp2.css">
</head>
<body>
<div class="container">
<div class="split left">
<button type="button" name="btnl">Mer info</button>
</div>
<div class="split right">
<button type="button" name="btnr">Mer info</button>
</div>
<div class="split rightmiddle">
<button type="button" name="btnm">Mer info</button>
</div>
<div class="split leftmiddle">
<button type="button" name="btnlm">Mer info</button>
</div>
</div>
</body>
</html>
CSS
CSS
html, body{
margin: 0;
padding: 0;
}
*
{
box-sizing: border-box;
}
.container
{
width: 100%;
display: block;
}
button{
background: none;
color: #ccc;
width: 150px;
height: 80px;
border: 1px solid #338033;
font-size: 18px;
border-radius: 4px;
transition: .6s;
overflow: hidden;
}
button:hover{
background: #338033;
cursor: pointer;
outline: none;
}
.left button, .right button, .rightmiddle button, .leftmiddle button{
top: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
}
.split{
width: 25%;
height: 200px;
overflow: hidden;
position: relative;
top: 0;
overflow-x: hidden;
float: left;
}
.left{
background: url('https://image.ibb.co/m3ZbRb/programmer.png') center center no-repeat;
}
.right{
background: url('https://images.pexels.com/photos/860564/pexels-photo-860564.jpeg?auto=compress&cs=tinysrgb&h=650&w=940') center no-repeat;
}
.rightmiddle{
background: url('https://images.pexels.com/photos/1133957/pexels-photo-1133957.jpeg?auto=compress&cs=tinysrgb&h=650&w=940') center center no-repeat;
}
.leftmiddle{
background: url('https://images.pexels.com/photos/414391/pexels-photo-414391.jpeg?auto=compress&cs=tinysrgb&h=350') center no-repeat;
}
.left, .right, .rightmiddle, .leftmiddle
{
background-size: cover;
}
如果页面上没有其他按钮，则执行此操作。left button，.right button ,.右键按钮，.leftmiddle按钮是很多工作，你应该只使用按钮。
记得率如果有帮助
If you don't have other buttons on the page doing this .left button, .right button, .rightmiddle button, .leftmiddle button is a lot of work you should rather use button only.
Remember to rate if that helped
这篇关于如何使用HTML和CSS制作4x1图像布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
