gpt4 book ai didi

html - 使用 CSS 将图像定位在以下
之上

转载 作者:太空宇宙 更新时间:2023-11-04 10:54:41 27 4
gpt4 key购买 nike

我正在尝试实现附图中所示的布局。

enter image description here

我正在使用 Bootstrap 3,我目前有以下 HTML 标记(“white-bg”的 CSS 仅由一行背景颜色完成,底部的灰色是通过设置背景颜色 body ):

<body class="gray-bg">
<section class="white-bg">
<div class="row">
<div class="col-lg-12">
<h2 class="text-center">Title</h2>
<img class="feature-image" src="./images/image.jpg" alt="">
</div>
</div>
</section>

<section>
<div class="row">
<div class="col-lg-12">
<p>Body text...</p>
</div>
</div>
</section>
</body>

我想知道我的 CSS 中的 .feature-image 需要什么才能实现我想要的布局?

非常感谢!

最佳答案

我在移动设备上,所以我无法检查我的答案,但是给你的 gray_bg div 一个负的上边距应该可以解决问题。像这样 margin-top: -10px;还。您可能必须将底部的 div 放在一类容器流体中

好的,这是一个工作示例

.white-bg {
background-color: white;
}

.feature-image {
background-color: lightgray;
padding-top: 100px;
padding-bottom: 50px;
padding-left: 50px;
padding-right: 50px;
margin-left: 150px;
margin-bottom: -20px;
}
.gray-bg {
background-color: gray;
}
<body class="gray-bg">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<section class="white-bg">
<div class="row">
<div class="col-lg-12">
<h2 class="text-center">Title</h2>
<img class="feature-image" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRnL5-GO2muNIeI97gaUNYWdyzB5tLozHkacW4O8Q0TNWQC35ns" alt="">
</div>
</div>
</section>

<section>
<div class="row">
<div class="col-lg-12">
<p>Body text...</p>
</div>
</div>
</section>
</body>

关于html - 使用 CSS 将图像定位在以下 <div> 之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34733578/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com