个人中心
gpt4 book ai didi

html - 如何使用 Bootstrap 让一列跨越多行？

转载 作者：行者123 更新时间：2023-11-28 16:22:02 28 4
gpt4 key购买 nike

enter image description here

我想将上面的模型转换为 HTML 和 CSS，但很难通过使图像跨越 2 行 来实现它>。

我已经尝试通过我在网上找到的一些代码来实现它，但它看起来仍然没有响应。

这是我到目前为止所做的。

enter image description here

这是我的代码:

    <!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>

有人可以指导我吗？谢谢

最佳答案

试试这个 enter image description here 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/

28 4 0
文章推荐： html - 在页脚中居中 div
文章推荐： PHP jQuery 脚本修改/修正
文章推荐： php - 使用php动态创建对象
文章推荐： css - 元素和文本 CSS3 定位
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com