我要实现的目标是使div
“ dimg2”中的图像与h3
元素在同一行。
我已经尝试了将img和div包裹在其上的div和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>
基本上试图使它看起来像这样:
答案 0 :(得分:1)
尝试在其中之一上使用绝对位置,并从其自身更改其位置... https://www.w3schools.com/css/css_positioning.asp
答案 1 :(得分:1)
<!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;
}
答案 2 :(得分:0)
检查Div,p和h3元素的用法。 Div,p和h3都以块形式显示内容,如果要在同一行上显示图像,则必须将其放在网格中。 我建议将bootstarp用于网格。 https://www.w3schools.com/bootstrap/
答案 3 :(得分:0)
fcontent类还不是“内联块”,并且还没有width属性,使其自动成为其父类(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;
}