HTML分部位置

我正在爲我的網站做一個新的設計。我認爲我應該製作不同的盒子。他們的所有borders和backgrounds必須相同，但它們的heights和widths必須不同。所以，我創建了一個css類。HTML分部位置

.box 
{ 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNWFmZiIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNWFmZiIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); 
    background: -moz-linear-gradient(left, rgba(0,90,255,0.5) 0%, rgba(0,90,255,0.5) 100%); 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,90,255,0.5)), color-stop(100%,rgba(0,90,255,0.5))); 
    background: -webkit-linear-gradient(left, rgba(0,90,255,0.5) 0%,rgba(0,90,255,0.5) 100%); 
    background: -o-linear-gradient(left, rgba(0,90,255,0.5) 0%,rgba(0,90,255,0.5) 100%); 
    background: -ms-linear-gradient(left, rgba(0,90,255,0.5) 0%,rgba(0,90,255,0.5) 100%); 
    background: linear-gradient(to right, rgba(0,90,255,0.5) 0%,rgba(0,90,255,0.5) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80005aff', endColorstr='#80005aff',GradientType=1); 

    border:thick white groove; 
    border-bottom-color:gray; 
    border-right-color:gray; 
    border-top-left-radius:1em; 
    border-bottom-right-radius:1em; 

}

我把HTML代碼的身體 -

<body onload="load()"> 

    <center> 

     <div style="width:1120px"> 
      <img src="images/blu-logo.png" style="float:left;">  
      <div class="box" style="width:900px;height:50px;float:right;margin-top:100px;"> 
      </div> 
     </div> 

     <div class="box" style="width:900px;height:500px;"> 
      <p>Sample text</p> 
     </div>   
    </center> 

</body>

我不知道當我看到文件中的瀏覽器爲師如何，但瘋狂的事情發生了（ <div>）本應該是低於另一方實際上與第一個位置相同。

來源

2012-10-29 Ishpreet

的可能重複[爲什麼我的內容顯示外部div？]（http://stackoverflow.com/questions/10062255/why-is-my-content-showing-outside-the-div） – Quentin

只是一個說明，說現在

標記已被棄用，因爲這樣不應該再被使用了。 –

我認爲你的問題是關於你的浮動元素。

試着將css屬性「overflow：auto」拖放到包含兩個浮動元素的DIV上。

來源

2012-10-29 15:39:30

Thanx，它的工作 – Ishpreet

很高興有幫助！ –

清除浮動DIV/IMG - 你可以用一個樣式屬性添加一個空格或給它一個明確的階級使用其他元素（BR是一個選項，以及）

來源

2012-10-29 15:40:23 Adrift

回答

相關問題