gpt4 book ai didi

css - 我还是新手,正在尝试了解如何放置我的图片和文本项

转载 作者:行者123 更新时间:2023-11-28 09:57:09 24 4
gpt4 key购买 nike

这是我正在处理的着陆页。只是一个试图吸引人们进入太空的有趣页面:)

http://nyhunter77.github.io/businessPage/

我认为让你们看到整个事情会更容易。
我今天刚开始在我的页面上布置元素,但我很难处理最上面一行的元素。

如果没看错的话,左边是飞机,空军符号应该在中间,我要的是右边的引号。

当我开始时,一切都融为一体,直到我得到报价。我将图像用作多个背景图像,但是当我到达那个点并覆盖它们时,单词 block 元素与图像重叠。

这里有一篇针对其他人的帖子建议返回到仅将图像用作 img inline 以获得更好的控制。到目前为止,这种方式更加艰难。

建议?谢谢!

根据某人的要求 - 发布代码 ... HTML:

<body>
<div class="topbar">
<div id="shuttle" style="display: inline">
<img src="images/shuttle.jpg" style="display: inline; height: 155px">
</div>
<div id="airforce" style="display: inline">
<img src="images/airforce.gif" style="display: inline; height: 155px">
</div>
<div style="display: inline">
<p id="quote" style="margin-right: 50px;"> "Flying the Sci-Fi skies <br/>
<p id="quote" style="margin-right: 85px;"> since 2012!" </p>
</div>
</div>
<div class="topbarLeft">
<!-- Logo for Space Plane should go here. -->
<a id="logobutton" href="index.html">Space Plane Airlines</a>
</div>
<div class="topbarRight">
<a id="help" href="www.google.com">Help</a>
<a id="contact" href="www.google.com">Contact Us</a>
<a id="signIn" href="www.google.com">Sign In</a>
<a id="join" href="www.google.com">Join</a>
</div>

CSS:

.topbar {
/* background: url("images/shuttle.jpg") 0 0 no-repeat, url("images/airforce.gif") 50% 0 no-repeat; */
width: 100%;
height: 175px;
background-size: auto 75%;
/* display: inline; */

/* background: url("images/airforce.gif") 0 0 no-repeat;
width: 300px;
height: 175px;
background-size: auto 75%; */
}

#quote {
text-align: right;
font-size: 2.5em;
list-style-type: none;
font-family: cursive, arial, times;
padding-top:15px;
/* float: right; */
}

.topbarLeft {
text-align: left;
display: inline;
/* float: left; */
}

#logobutton {
font-family: cursive, arial, times;
font-size: 2.5em;
text-decoration: none;
border: 2px solid black;
background: url("images/clouds.jpg") 0 0 no-repeat;
margin-left: 4px;
padding: 0 10px 0 10px;
}

#logobutton:hover {
text-decoration: underline;
}

.topbarRight {
text-align: right;
display: inline-block;
float: right;
}

最佳答案

也许去掉display: inline;而是放 float: left;#shuttle#airforce , 和 float: right;在包含两个引号的 div 中。然后添加一个width: 40%#shuttle玩定位中心图像:

CSS:

#shuttle {
float: left;
width: 40%;
}

#airforce {
float: left;
}

HTML:

<div style="float: right;">

我还建议给第三个 div 起个名字,不要使用内联样式。

关于css - 我还是新手,正在尝试了解如何放置我的图片和文本项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24870684/

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