我想实现的是让图像在 div
"dimg2 "与 "dimg2 "在同一行。h3
我试过在img和div上用block和inline-block显示选项。我已经尝试了 padding/margin
底部,却没有任何效果。我只是想把图片往上移。它向下 padding-top
但不上去 padding-bottom
.
html,
body {
margin: 0px 0px 0px 0px;
background: whitesmoke;
}
header {
width: 100%;
height: 40px;
display: flex;
}
img {
width: 40px;
height: 30px;
padding-left: 100px;
position: relative;
}
h3 {
margin: 0;
}
h4 {
padding-left: 3px;
position: relative;
}
ul {
width: 100%;
display: flex;
list-style: none;
justify-content: flex-end;
}
ul li {
padding-right: 100px;
}
.btn {
background-color: #5AB7FF;
border: 1px solid #5AB7FF;
font-size: 20px;
border-radius: 25%;
padding: 15px;
}
.btn2 {
background-color: white;
border: 1px solid #5AB7FF;
font-size: 20px;
border-radius: 25%;
padding: 15px;
}
.fheader {
width: 100%;
display: flex;
height: 2000px;
padding-top: 100px;
padding-left: 100px;
}
.img2 {
width: 500px;
height: 500px;
margin-bottom: 400px;
}
.dimg2 {
padding-left: 610px;
padding-bottom: 300px;
}
<header>
<img src="./resources/images/wave.png" alt="wave">
<h4 style="color: #5AB7FF;">Fusion.</h4>
<ul>
<li style="color: #5AB7FF;">Home</li>
<li>Services</li>
<li>Team</li>
<li>Pricing</li>
<li>Testimonial</li>
<li>Contact</li>
</ul>
</header>
<section>
<div class="fheader">
<div class="fcontent">
<h3>App, Business&Saas Landing Page Template</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque viverra ligula nunc, ut<br>
lacinia neque tincidunt at.
Integer congue hendrerit elit, quis feugiat enim tristique.<br>
Pellentesque nec urna nisi.
</p>
<button class="btn">Download</button> <button class="btn2">Learn More</button>
</div>
<div class="dimg2">
<img class="img2" src="./resources/images/app.png" alt="building an app">
</div>
</div>
</section>
基本上是想让它看起来像这样。
<!DOCTYPE html>
<html>
<head>
<title>FUSION</title>
<link rel="stylesheet" href="./resources/css/styles.css" type="text/css">
</head>
<body>
<header>
<img src="./resources/images/wave.png" alt="wave">
<h4 style= "color: #5AB7FF;">Fusion.</h4>
<ul>
<li style= "color: #5AB7FF;">Home</li>
<li>Services</li>
<li>Team</li>
<li>Pricing</li>
<li>Testimonial</li>
<li>Contact</li>
</ul>
</header>
<section>
<div class="fheader">
<div class="fcontent">
<div class="dimg2">
<img class="img2" src="./resources/images/app.png" alt="building an app">
</div>
</div>
<h3>App, Business&Saas Landing Page Template</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra ligula nunc, ut <br> lacinia neque tincidunt at. Integer congue hendrerit elit, quis feugiat enim tristique <br>. Pellentesque nec urna nisi.
</p>
<button class="btn">Download</button>
<button class="btn2">Learn More</button>
</div>
</section>
</body>
</html>
html, body {
margin: 0px 0px 0px 0px;
}
header {
width: 100%;
height: 40px;
display: flex;
}
img {
width: 40px;
height: 30px;
padding-left: 100px;
position: relative;
}
h4 {
padding-left: 3px;
position: relative;
}
ul {
list-style: none;
width: 100%;
display: flex;
justify-content: flex-end;
}
ul li {
padding-right: 100px;
}
.btn {
background-color: #5AB7FF;
border: 1px solid #5AB7FF;
font-size: 20px;
border-radius: 25%;
padding: 15px;
}
.btn2 {
background-color: white;
border: 1px solid #5AB7FF;
font-size: 20px;
border-radius: 25%;
padding: 15px;
}
.fheader {
width: 100%;
height: 2000px;
position: relative;
padding-left: 100px;
padding-top: 100px;
}
.img2 {
width: 250px;
height: 250px;
}
.dimg2 {
float: right;
position: relative;
display: inline-block;
}
试着在其中一个元素上使用position absolute并改变其位置......https:/www.w3schools.comcsscss_positioning.asp
检查Div、p和h3元素的使用情况,Div、p和h3都是以块的形式显示内容,如果你想把你的图片放在同一条线上,那么你必须把它做成网格,我建议使用bootstarp来做网格。https:/www.w3schools.combootstrap
fcontent类还不是 "内联块",没有宽度属性,使得它自动成为它的父类(fheader)的100%,没有给dimg2留下空间,如果你修复了这一点,你就不需要在dimg2上再加填充了.替换。
.img2 {
width: 500px;
height: 500px;
margin-bottom: 400px;
}
.dimg2 {
position: absolute;
display: inline-block;
}
.fcontent{
width:50%;
display: inline-block;
padding-top:0px;
}