事業部是在錯誤的位置顯示，div的高度

-1

<body style="color: #25670c; margin: 0 0 0 0; padding: 0 0 0 0; font-family : Times New Roman; font-size : 14px; text-align: center;"> 


<div style="height: 96px; width: 985px;"><a href="www.one.lt"> 
    <img border="0" src="images/graphic/header.png" width="985" height="96" alt="header" title="DigiSpot eBay store" /></a></div> 
<div style="height: 41px; width: 985px;"> 
    <img border="0" src="/images/graphic/meniu.png" alt="DigiSpot meniu" width="985" height="41" usemap="#mapas" /> 

<map name="mapas"> 
    <area shape="rect" coords="56,0,0,41" href="www.one.lt" alt="DigiSpot eBay store home" title="DigiSpot eBay store home"> 
    <area shape="rect" coords="539,0,400,41" href="www.one.lt" alt="About Digispot" title="About DigiSpot"> 
    <area shape="rect" coords="699,0,539,41" href="www.one.lt" alt="Delivery information" title="Delivery information"> 
    <area shape="rect" coords="845,0,699,41" href="www.one.lt" alt="Returns information" title="Returns information"> 
    <area shape="rect" coords="985,0,845,41" href="www.one.lt" alt="Contacts information" title="Contacts information"> 
</map> </div> 

<div style="position:relative"> 
    <div style="float:left; width: 663px; height:100px; text-align: center; background-color:#d6d6a4;"><img border="0" src="/images/graphic/description.png" width="232" height="81"><br /><div style="text-align: left; margin-left: 10;">[[Description]]</div></div> 
    <div style="float:left; width: 324px; height:100px; text-align: center; "> 
     <div style="width: 324px; color: #ffffff; background-color:#6b8861; font-size : 34px;">[[Title]]</div> 
     <div style="width: 324px; color: #ffffff; background-color:#6b8861;"><div style="width: 320px; margin: 2 2 2 2; background-color:#ffffff;">[[Picture1]]</div><div style="width: 300px; height: 2px; background-color:#6b8861; color: #6b8861;"></div></div> 
     <div style="width: 324px; color: #801010; font-size : 40px; background-color:#d6d6a4;">Price: [[BuyItNowPrice]]</div> 
    </div> 
</div> 
<div style="clear: both; text-align: center; width:985px; margin: 0 auto;"><img border="0" src="graphic/buttom.png" width="524" height="42"></div> 

</body>

結果是不是如我所願，看起來像這樣： enter image description here Bigger image on push here

下面是撫摸問題的地方： enter image description here Bigger image on push here

我想把所有這個頁面都對齊到中心，我在正文中使用了對齊方式，但是它沒有幫助。
右邊的div應該在頁面底部的中心，我不知道他爲什麼選擇這樣的位置，圖像的某些部分在「價格」div下。
是否有可能做左邊和右邊的價格和其他信息股利總是有相同的高度，這是不固定的描述div，因爲我想有那些div的底部沒有分開。

編輯：推動圖像，使他們更大。

來源

2013-01-10 Tautvydas

您應該學習如何使用CSS樣式。內聯樣式是一種不好的做法 –

看到這個演示： http://jsbin.com/uhakak/7/edit

首先，你應該換行所有內容到一些股利，這將使其在中心：

和CSS它：

#mainContent { 
    width:945px; 
    margin:0 auto; 
}

這樣你就可以將所有內容放在頁面的中心。文本對齊：中心僅適用於文本（內聯元素，實際上文本僅僅是內聯元素的單獨情況）。 Div是塊元素和文本對齊：中心不會影響它們。

二。不知道爲什麼你有右邊的那個div，但是試着用postion:relative來添加隱藏到你div的溢出，它包含描述，標題和價格。我看到它沒有問題。

第三，這是有點棘手，使兩個div有相同的高度，但由於你的觀點是簡單的背景色，你可以爲父div設置背景。與溢出：隱藏（其實，因爲我可以看到位置：相對不需要那裏）。上面的演示應該顯示它的工作原理。我刪除了高度：100px; there

來源

2013-01-10 10:29:59

非常感謝！我在學習，你幫了我很多！ – Tautvydas

@Tautvydas就像建議：瞭解如何使用CSS選擇器並且不使用內聯樣式。它將簡化將來支持你的產品的人們的生活和生活。只要看看awesomestvi在這裏的答案是多麼清潔。祝你學習好運！ –

刪除想要居中的每個元素的float:left。然後將margin: 0 auto添加到您想要居中的每個元素。

編輯：並嘗試學習如何設置不內聯樣式的元素。它會讓你的生活更輕鬆。

來源

2013-01-10 10:03:39

<html> 
    <head> 
     <title></title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <style> 
      #mypage{margin: 0 auto; 
       width: 950px;} 
      .main{margin: 0 auto; 
       text-align: center;} 
      .desc{width: 700px;  
       background-color:#d6d6a4; 
       float: left;} 
      .text{float: right;} 
     </style> 
    </head>  
    <body id="mypage"> 
     <div class="main"> 
      <div class="header"> 
       <a href="www.one.lt"><img src="http://www.gvcdigital.co.uk/images/graphic/header.png" alt="header" title="DigiSpot eBay store"></a> 
      </div> 
      <div class="menu"> 
       <img src="http://www.gvcdigital.co.uk/images/graphic/meniu.png" alt="DigiSpot meniu" usemap="#mapas"/> 
      </div> 
      <div class="desc"> 
       <img src="http://www.gvcdigital.co.uk/images/graphic/description.png"> 
      </div> 
      <div class="text">[[Description]]</div><br> 
      <div class="text">[[Title]]</div><br> 
      <div class="text">[[Picture1]]</div><br> 
      <div class="text">Price: [[BuyItNowPrice]]</div>    
      <img src="graphic/buttom.png"> 
     </div> 
    </body> 
</html>

來源

2013-01-10 10:45:38 Awesomestvi

事業部是在錯誤的位置顯示，div的高度

回答

相關問題