gpt4 book ai didi

html - 如何修复此布局

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

我一直在努力让歌手/词曲作者的头衔 float 到页面顶部名字的右侧。我还想要一个单独的行,其中包含 img 和其右侧的文本段落。

我现在遇到的问题是我无法创建一个黑色的导航菜单,它漂浮在女孩图片的右侧并停留在文本段落的下方

我在 Dreamweaver 中编写了后续代码,这不包括导航菜单。当我在 Dreamweaver 中查看文档时,它都显示正确。然而,当我在浏览器中打开它时,它显示得很奇怪,文本段落显示在大图像下方。

有人可以提供帮助说明为什么会发生这种情况,一旦修复它,我将如何在文本段落的正下方添加导航菜单,干杯

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body{margin:0px; padding:0px;}
#footer{ background:black; height:100px;}
#top{height:50px; background:black; }
.logo{float:left;}
.title{float:left;}
.alice{float:left;}
.info{float:left;}
</style>
</head>
<body>
<div class="wrapper">
<div id="top">
Content for id "top" Goes Here
</div>
<div class="logo">
<img src="http://digitalgenesis.com.au/sites/alice/img/namelogo.png" />
</div>
<div class="title">
<h2>Singer/Songwriter</h2>
</div>
<div style="clear:both;">
</div>
<div class="alice">
<img src="http://digitalgenesis.com.au/sites/alice/img/alice.png" />
</div>
<div class="info">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa est, ultrices quis volutpat vitae, volutpat id mauris. In lacinia, nisi sit amet tincidunt rhoncus, nunc augue pharetra neque, eget sagittis orci justo tincidunt lectus. Phasellus sollicitudin lacus sed nisl eleifend bibendum. Vivamus imperdiet porttitor facilisis. Pellentesque quis metus risus, ac sagittis augue. Vivamus vehicula lacus ullamcorper sapien tincidunt congue. Vivamus diam tellus, faucibus sit amet rutrum ut, mattis eu orci. Fusce ullamcorper, odio et ultricies posuere, lorem orci faucibus orci, vel vehicula mauris arcu vitae metus. Cras congue nulla id quam elementum porttitor. Praesent dapibus odio nec nisl pretium quis pharetra leo suscipit. <br /><br />
Phasellus vestibulum magna ut tortor sagittis ut pretium tellus feugiat. Integer ullamcorper enim vitae odio ultricies tempor. Donec ullamcorper erat tincidunt tortor laoreet ultricies. Nullam volutpat sollicitudin est, et hendrerit metus aliquam in. Nunc convallis tempus velit, a interdum ipsum ultricies eu. Integer ultrices mollis molestie. Donec augue sem, lacinia quis tempor id, rutrum quis sapien. Nullam sit amet velit vitae justo tempus fermentum sit amet et sapien. Ut pretium metus odio, a tempus nisi. Ut fringilla semper justo. <br /><br />
Aliquam pellentesque libero sit amet nisi feugiat sagittis. Integer in purus magna. Suspendisse at ipsum id ante fringilla vehicula id eget nibh. Morbi consequat ligula quis mauris sagittis egestas. Maecenas quam odio, posuere nec venenatis non, posuere ut elit. Nulla tincidunt tristique tellus in commodo. Donec aliquet libero et enim porta vel auctor ipsum aliquet. Aenean eget nisl non quam auctor malesuada vitae id felis. In scelerisque massa eu turpis fringilla congue. Cras odio sem, aliquam et blandit nec, semper ut turpis. Curabitur bibendum, magna sed rhoncus placerat, justo quam scelerisque sem, et varius massa nisi ac ligula. In pharetra tincidunt odio, sodales mollis sem congue non. Integer ullamcorper nibh augue, sit amet semper eros. Nunc malesuada odio vel nisi venenatis quis dictum nisi lacinia. Sed imperdiet dapibus sem, a suscipit justo fringilla at. Fusce quis lacus a diam porttitor auctor. Suspendisse potenti.
</p>
</div>
<!-- end info -->
<div style="clear:both;">
</div>
<div id="footer">
Content for id "footer" Goes Here
</div>
</div>
<!-- end wrapper -->
</body>
</html>

(编辑:See this fiddle)

最佳答案

dazza_au

非常粗略的修复,但可以完成工作:http://jsfiddle.net/MedDj/4/

基本上,如果您希望 float 元素彼此相邻 float ,您需要向它们添加宽度

查看上面的实例,如果您需要进一步解释,请告诉我?

问候,

下面是代码,以备不时之需:

HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>
<div id="top">Content for id "top" Goes Here</div>
<div class="wrapper">
<div class="logo"><img src="http://digitalgenesis.com.au/sites/alice/img/namelogo.png" /></div>
<div class="title"><h2>Singer/Songwriter</h2></div>
<div style="clear:both;"></div>
<div class="alice"><img src="http://digitalgenesis.com.au/sites/alice/img/alice.png" /></div>

<div class="info"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa est, ultrices quis volutpat vitae, volutpat id mauris. In lacinia, nisi sit amet tincidunt rhoncus, nunc augue pharetra neque, eget sagittis orci justo tincidunt lectus. Phasellus sollicitudin lacus sed nisl eleifend bibendum. Vivamus imperdiet porttitor facilisis. Pellentesque quis metus risus, ac sagittis augue. Vivamus vehicula lacus ullamcorper sapien tincidunt congue. Vivamus diam tellus, faucibus sit amet rutrum ut, mattis eu orci. Fusce ullamcorper, odio et ultricies posuere, lorem orci faucibus orci, vel vehicula mauris arcu vitae metus. Cras congue nulla id quam elementum porttitor. Praesent dapibus odio nec nisl pretium quis pharetra leo suscipit.
<br /><br />
Phasellus vestibulum magna ut tortor sagittis ut pretium tellus feugiat. Integer ullamcorper enim vitae odio ultricies tempor. Donec ullamcorper erat tincidunt tortor laoreet ultricies. Nullam volutpat sollicitudin est, et hendrerit metus aliquam in. Nunc convallis tempus velit, a interdum ipsum ultricies eu. Integer ultrices mollis molestie. Donec augue sem, lacinia quis tempor id, rutrum quis sapien. Nullam sit amet velit vitae justo tempus fermentum sit amet et sapien. Ut pretium metus odio, a tempus nisi. Ut fringilla semper justo.
<br /><br />
Aliquam pellentesque libero sit amet nisi feugiat sagittis. Integer in purus magna. Suspendisse at ipsum id ante fringilla vehicula id eget nibh. Morbi consequat ligula quis mauris sagittis egestas. Maecenas quam odio, posuere nec venenatis non, posuere ut elit. Nulla tincidunt tristique tellus in commodo. Donec aliquet libero et enim porta vel auctor ipsum aliquet. Aenean eget nisl non quam auctor malesuada vitae id felis. In scelerisque massa eu turpis fringilla congue. Cras odio sem, aliquam et blandit nec, semper ut turpis. Curabitur bibendum, magna sed rhoncus placerat, justo quam scelerisque sem, et varius massa nisi ac ligula. In pharetra tincidunt odio, sodales mollis sem congue non. Integer ullamcorper nibh augue, sit amet semper eros. Nunc malesuada odio vel nisi venenatis quis dictum nisi lacinia. Sed imperdiet dapibus sem, a suscipit justo fringilla at. Fusce quis lacus a diam porttitor auctor. Suspendisse potenti. </p>
<ul class="nav">
<li><a href="#">Nav button one</a></li>
<li><a href="#">Nav button two</a></li>
</ul>

</div><!-- end info -->

<div style="clear:both;"></div>

</div><!-- end wrapper -->
<div id="footer">Content for id "footer" Goes Here</div>
</body>
</html>

CSS

.wrapper{min-width:800px;width:800px;}
body{margin:0px; padding:0px;}
#footer{ background:black; height:100px;}
#top{height:50px; background:black; }
.logo{float:left;}
.title{float:right;padding:40px 10px 0 0; font-size:130%;}
.alice{float:left;width:400px; overflow:hidden;}
.info{float:left;width:400px;}
.info ul.nav{
list-style:none;
padding:0;
margin:10px 0;
overflow:hidden;
}

.info ul.nav li{
float:left;
padding-right:10px;
}

.info ul.nav li a{
background-color:#000;
color:#fff;
padding:10px;
text-decoration:none;
display:block;
}

关于html - 如何修复此布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5268202/

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