html - Logo 中的相对位置不起作用

Question

我创建了一个设计如下

http://jsfiddle.net/g9TT7/1/

我想将 Logo 放在页面顶部和左侧下方

<a href="index.html"  style="margin-top:10px;position:relative!important;width:200px;display:block;" class="img1">
<img src="image/img_2.png" alt="logo" />
</a>

这里我想将公司名称放在页面的中央， Logo 将放在页面的左侧。我在我的 Logo 中设置了绝对位置但没有工作。请帮我做这件事。

Answer 1

我希望你想要这样的东西:

Demo

在您的 Logo 样式中添加 css float:left 并从业务 div 中删除绝对位置。您还可以通过调整边距从顶部和左侧调整位置。

HTML:

<div class="b" style="text-align:center;">      

        <a href="index.html" class="img1">
                <img src="image/img_2.png" alt="logo" />
        </a>

        <div class="business_name" >
                            Business
        </div>
        <div class="clear"></div>
</div>

CSS:

.clear
{
    clear:both;
}
.img1{
    margin-top:20px;
    width:200px;
    display:block;
    float:left;
}
.business_name {
    width: 78%;
    font-size: 43px;
    font-weight: bold;
    float: left;
    text-align: center;
    line-height: 28px;
    margin-top: 5px;
}

.b {
    font-size: 25px;
    font-weight: bold;
    width: 78.5%;
    text-align: left;
    height: 50px;
    margin: 0px;
    color: rgb(67, 161, 240);
}
.img1 {
    float: left;
    margin: 2px 0px 0px;
    width: 20%;
    text-align: left;
    border: 0px solid red;
}