0

css 新手。我的页面左上角有一张图片。在它的右边,我有两行垂直对齐的文本。我想在图像的右边缘和文本的最左侧字符之间放置一些空间。我认为 margin-left 或 padding-left 都可以做到这一点,但它不起作用。我究竟做错了什么?谢谢!

<div class="frame">
    <div class="page">
        <div class="myimage">
            <img id="mainpic" src="images/small.png" width="330px" height="220px">
        </div>

        <div class="title" >
            <h1>Some Title</h1>
            <p>Short explanation of what to do here.</p>
        </div>

    </div>
</div>

css 文件:

body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}

.frame{
}

.page{    
    margin:0 auto;
    width:1000px;
    height:1000px;
}

.myimage {
    position:relative;
    float:left;
    width="330px";
    height="220px";
    float:left;
}

.title{
    position:relative;
    float:left
    margin-left:100px;    <-- one approach, not working
    padding-top:100px;
    width="670px";
    height="220px"
    min-height="220px"

}

.title h1 {
    padding-left:100px;    <--another approach, still not working
    color:#000000;
    font-size:xx-large;
}

title p {
    color:#444444;
    font-size:large;
}
4

2 回答 2

1

Margin-left 似乎可以正确调整边距,但是您列出的 100px 边距不会增加任何额外的空间,因为它不比紧挨“标题”div 左侧的“myimage”标签更宽。

一种解决方案是让 margin-left > 大于 330px(您为“myimage”定义的宽度)或简单地使用 CSS left 属性。

left:100px;
于 2013-06-29T23:57:36.923 回答
0

发现了问题。float:left 后没有分号。将其添加到我的一长串愚蠢的疏忽中。

于 2013-06-30T00:28:01.210 回答