在 div 中定位图像和文本答案

【问题标题】：Positioning images and text inside a div在 div 中定位图像和文本
【发布时间】：2013-10-29 05:03:55
【问题描述】：

我是 CSS 新手，正在尝试为我的网页创建标题

header的结构是这样的

-LOGOIMAGE--link1--link2--TITLEIMAGE(@center)--link3--link4-

这是标题的html

<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 http://jsfiddle.net/WSDJ3/

我不知道为什么图像和文字会这样放置。请帮忙！

【问题讨论】：

您想知道为什么图像与文本重叠？这是您希望图像的大小吗？
赞这个jsfiddle.net/WSDJ3/2
你必须使用选择器“.logo”和“.title”而不是“#logo”和“#title”，因为你在那里使用类而不是id。是这个问题吗？

标签： html css alignment

【解决方案1】：

要选择一个类，您应该使用. 而不是#
# 用于选择一个 ID

所以 CSS 应该是这样的：

.logo
{
     float:left;
     width:72px;
     height:70px;
     margin:5px 0;
}

.title
{
     float:left;
     width:175px;
}

【讨论】：

【解决方案2】：

您正在使用类和 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;
}

【讨论】：

【解决方案3】：

为此添加只是向左浮动到图像。您可以选择提供我在下面提到的内联 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>

【讨论】：