Question

我创建了一个位于

之下的设计

我想在页面的顶部和左侧放置徽标表示

<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>

在这里，我想将商家名称放在页面的中心，徽标将位于页面的左侧。我在我的徽标中设置了绝对位置但没有工作。请帮我这样做。

Answer 1

这样的东西？ http://jsfiddle.net/ADDTn/

<div class="header">
    <a href="#" class="logo">
        <img src="img.jpg" />
    </a>
    <h1>Bussiness</h1>
    <div class="clear"></div>
</div>

css

.header {
    width: 100%;
    height: 100px;
}

.logo {
    display: block;
    float: left;
}

h1 {
    text-align: center;
}

.clear {
    clear: both;
}

Answer 2

指定z-index值

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

see this demo

Answer 3

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

Demo

在徽标样式中添加css float：left并从business 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;
}

徽标中的位置相对不起作用

3 个答案: