圖像位置的div

我敲我的頭撞在牆上試圖理解爲什麼我的形象是不動成我指定的股利，而是跨下邊界。在使用Firebug查看元素時，我沒有看到任何造型衝突。我也會拋出我的CSS職位技能不在我想要的地方。我想將圖像放在文本的左側。那麼我做錯了什麼？圖像位置的div

我的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; 
     }

來源

2014-02-07 user3285645

你能告訴我們的jsfiddle /演示？我沒有看到任何會以你描述的方式影響「img」位置的東西 – helion3

首先，你需要移動<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>

然後，改變#hdr-imgdisplay: block到display: inline-block。

最後，添加display: inline-block到一個新的h1 CSS類：

h1 { 
    display: inline-block; 
}

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

來源

2014-02-07 22:16:37 Anonymous

您需要將圖像更改爲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/

來源

2014-02-07 22:18:10

圖像位置的div

回答

相關問題