Question

我正在撞墙，试图理解为什么我的图像没有移动到我指定的div中，而是跨越下边界。在使用Firebug查看元素时，我没有看到任何样式冲突。我也会抛弃我的CSS位置技能并不在我想要的地方附近。我想将图像放在文本的左侧。那么我做错了什么？

我的HTML：

    ...
    <div id="container">
        <div class="header">
           <h1 id="mgtitle">Pierce County, Washington<br/>
           Master Gardener Foundation</h1>
           <img src="images/flower-1.jpg" height="75" id="hdr-img" />
        </div>
        <div class="mainbody">
            <div id="menu">
              <ul> ...

我的CSS：

    #container {
        width: 900px;
        // max-height: 750px;
        margin: 10px auto;
        border: 1px solid #fff;
        background-color: #ffffff;
        box-shadow: 0px 2px 7px #292929;
        -moz-box-shadow: 0px 2px 7px #292929;
        -webkit-box-shadow: 0px 2px 7px #292929;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }



    .header {
        height: 130px;
        border: 1px solid black;;
        background-color: #ffffff;
        background-image: url("http://www.pc-wa-mg-conf.org/images/Flower-Backgrounds-8-          scaled.jpg");
        -webkit-border-top-left-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-topright: 5px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        text-align:center;
    }
    #hdr-img {
        position: relative;
        display: block;
        margin-top: 0%;
        margin-left: 0;
        /* margin-right: auto; */
        /*z-index: 1;*/
    }


    #mgtitle {
        font-family: 'Great Vibes', cursive;
        font-size: 2.5em;
        }

Answer 1

首先，您需要将图片移到代码中的<h1>上方，以便将其放在左侧：

<div class="header">
    <img src="images/flower-1.jpg" height="75" id="hdr-img" />
    <h1 id="mgtitle">Pierce County, Washington<br/>
    Master Gardener Foundation</h1>
</div>

然后，将display: block的{{1}}更改为#hdr-img。

最后，将display: inline-block添加到新的display: inline-block CSS类：

h1

小提琴：http://jsfiddle.net/hxX6u/1/

Answer 2

您需要将图像更改为display:inline-block，因为如果它是display:block，它将被推送到自己的行。此外，您需要将图片放在<h1>标记内，因为<h1>设置为display:block，否则会将图像推送到自己的行。在这些更改之后，唯一的问题是您在标题上设置的高度。您可以缩小内容并使其适合标题，方法是更改行高或缩小图像等。我从标题中取出高度以允许它根据其内容的高度进行调整。

CSS：

   #container {
        width: 900px;
        // max-height: 750px;
        margin: 10px auto;
        border: 1px solid #fff;
        background-color: #ffffff;
        box-shadow: 0px 2px 7px #292929;
        -moz-box-shadow: 0px 2px 7px #292929;
        -webkit-box-shadow: 0px 2px 7px #292929;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }



    .header {
        border: 1px solid black;;
        background-color: #ffffff;
        background-image: url("http://www.pc-wa-mg-conf.org/images/Flower-Backgrounds-8-          scaled.jpg");
        -webkit-border-top-left-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-topright: 5px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        text-align:center;
    }
    #hdr-img {
        position: relative;
        display: inline-block;
        margin-top: 0%;
        margin-left: 0;
        /* margin-right: auto; */
        /*z-index: 1;*/
    }


    #mgtitle {
        font-family: 'Great Vibes', cursive;
        font-size: 2.5em;
        }

http://jsfiddle.net/NABjE/

div中的图像位置

2 个答案: