我想将上面的模型转换为 HTML 和 CSS，但很难通过使图像跨越 2 行 来实现它>。
我已经尝试通过我在网上找到的一些代码来实现它，但它看起来仍然没有响应。
这是我到目前为止所做的。
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
grid-gap: 1px;
/*background-color: #2196F3;*/
}
.grid-container > div {
/*background-color: rgba(255, 255, 255, 0.8);*/
/*text-align: center;*/
font-size: 25px;
}
.fa {
padding: 15px;
font-size: 15px;
width: 20px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-google {
background: #dd4b39;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-youtube {
background: #bb0000;
color: white;
}
.fa-instagram {
background: #125688;
color: white;
}
</style>
</head>
<body>
<div class="grid-container">
<!--div class="item1">Header</div-->
<div class="item2" style="width: 10px"><img src="" ></div>
<div class="item3" style="margin-left: 80px;">
<p style="font-size: 15px; margin-top: 3px">LAWAL HARDCORE <br>
UI/UX | Graphics Designer. </p>
<div style="font-size: 15px;"> Email: Lawal@eventor.com </div>
</div>
<!--div class="item4">Right</div-->
<div class="item5" style="background-color:#4f2684; margin-right: 100px; margin-left: 80px; color: white; width: 600px;">
<div style="font-size: 18px"> Cranium One, Towry Close, Victoria Island, Lagos.
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-instagram"></a>
</div>
<div style="font-size: 18px"> 08023444444 | info@eventor.com | www.eventor.com </div>
</div>
</div>
<div> disclaimers: This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. This message contains confidential information and is intended only for the individual named. If you are not the named addressee you should not disseminate, distribute or copy this e-mail. Please notify the sender immediately by e-mail if you have received this e-mail by mistake and delete this e-mail from your system.</div>
</body>
</html>
有人可以指导我吗？谢谢
最佳答案
试试这个
jsfiddle Code
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2" style="background-color:lavender; margin: 0px;">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/b/b9/Terminator-2-judgement-day.jpg/250px-Terminator-2-judgement-day.jpg" width="250" height="250">
</div>
<div class="col-sm-10" style="background-color:lavenderblush;">
<div class="col-sm-12" style="background-color:white;">
<h1 style="color:#512586;">LAWAL HARDCORE</h1>
<h3 style="color:#;">UI/UX Designer | Graphics Designer</h3>
<p> <b>EMAIL:</b> lawalhardcore@eventor.com</p>
</div>
<div class="col-sm-12" style="background-color:#512586; color: white; height: 120px;">
<div class="cols-12">
<div class="col-sm-6">
<h4>Craninum One, Towry Close,</h4>
<h4>Adeola Odeku, Victoria Island, Lagos.</h4>
</div>
<div class="col-sm-6" style="padding: 25px; height: 68px; text-align: center;">
<button type="button" class="btn btn-default" style="border-radius: 50%;">
<span class="fa fa-facebook" style="color: #512586"></span>
</button>
<button type="button" class="btn btn-default" style="border-radius: 50%;">
<span class="fa fa-twitter" style="color: #512586"></span>
</button>
<button type="button" class="btn btn-default" style="border-radius: 50%;">
<span class="fa fa-instagram" style="color: #512586"></span>
</button>
<button type="button" class="btn btn-default" style="border-radius: 50%;">
<span class="fa fa-linkedin" style="color: #512586"></span>
</button>
</div>
</div>
<div class="cols-12" >
<div class="col-sm-2">
<p>08111 0832 161</p>
</div>
<span class="col-sm-1">|</span>
<div class="col-sm-2">
<p>info@eventor.com</p>
</div>
<span class="col-sm-1">|</span>
<div class="col-sm-2">
<p>www.eventor.com</p>
</div>
</div>
</div>
</div>
<div class="col-sm-12" style="background-color:white;">
<div> DISCLAIMER: This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. This message contains confidential information and is intended only for the individual named. If you are not the named addressee you should not disseminate, distribute or copy this e-mail. Please notify the sender immediately by e-mail if you have received this e-mail by mistake and delete this e-mail from your system.</div>
</div>
</div>
</body>
关于html - 如何使用 Bootstrap 让一列跨越多行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49954007/