Html 在div中定位图像和文本
我是css新手,正在尝试为我的网页创建标题 标题的结构如下所示 -LOGOIMAGE--link1--link2-----标题图像(@center)---link3--link4- 下面是标题的htmlHtml 在div中定位图像和文本,html,css,alignment,Html,Css,Alignment,我是css新手,正在尝试为我的网页创建标题 标题的结构如下所示 -LOGOIMAGE--link1--link2-----标题图像(@center)---link3--link4- 下面是标题的html <div id="header"> <img src="http://goo.gl/Uinfkp" class="logo"/> <div id="navbox1"> <a href="aaa.html">aaa&l
<div id="header">
<img src="http://goo.gl/Uinfkp" class="logo"/>
<div id="navbox1">
<a href="aaa.html">aaa</a>
<a href="bbb.html">bbb</a>
</div>
<img src="http://goo.gl/Uinfkp" class="title"/>
<div id="navbox2">
<a href="xxx.html">xxx</a>
<a href="yyy.html">yyy</a>
</div>
</div>
这就是我用css所做的尝试
我不知道为什么图像和文本会这样放置。请帮忙 您正在使用类和ID(这很好)。但是,您的CSS同时使用了
#
选择器。#
表示id(想想id号),
表示类。将其更改为:
#header
{
width:100%;
height:80px;
background:#232c2b;
}
.logo
{
float:left;
width:72px;
height:70px;
margin:5px 0;
}
#navbox1
{
float:left;
margin:30px 30px;
}
.title
{
float:left;
width:175px;
}
#navbox2
{
float:left;
margin:30px 30px;
}
a
{
color:white;
font-size:15px;
text-decoration:none;
margin:auto 10px;
}
要选择一个类,您应该使用
而不是
#
用于选择ID
因此CSS应该如下所示:
.logo
{
float:left;
width:72px;
height:70px;
margin:5px 0;
}
.title
{
float:left;
width:175px;
}
对于这个添加,只需在图像上向左浮动。您可以选择提供我在下面提到的内联css,也可以在类的帮助下使用内部css或外部css调用它
<div id="header">
<img src="http://goo.gl/Uinfkp" class="logo" style="float:left;"/>
<div id="navbox1">
<a href="aaa.html">aaa</a>
<a href="bbb.html">bbb</a>
</div>
<img src="http://goo.gl/Uinfkp" class="title" style="float:left;"/>
<div id="navbox2">
<a href="xxx.html">xxx</a>
<a href="yyy.html">yyy</a>
</div>
您想知道为什么图像与文本重叠?这就是您希望图像的大小吗?像这样,您必须使用选择器“.logo”和“.title”,而不是“#logo”和“#title”,因为您使用的是类而不是ID。这就是问题所在吗?