div標籤autowrapp子項

我正在測試如何製作響應式設計UI。出現了這個問題。我認爲div的默認行爲是包裝子項，它們的總寬度變成div的寬度。div標籤autowrapp子項

在上述例子中看到#search_area。這個div的寬度應該符合內部文本框和搜索框。但它將HTML標記的寬度設置爲1280像素。 W

#search_area{ 
      height: 100%; 
      position:relative; 
      left:50%; 
      top:20%; 
      }

爲什麼會發生這種嚴重錯誤。一個提示將幫助我。

在此先感謝。以下是該問題的截圖。

enter image description here

2014-03-13 Adithya

不，它不是，用螢火蟲或任何其他檢查員檢查你的元素 – Rex

因此，我已經發布了這個問題。此外，我已經添加了相同的截圖。請檢查。這是發生在Firefox和IE – Adithya

你的CSS

#header_area{ 
background:#B50E24; 
width:100%; 
height:10%; 
}

您指定width:100%因此它會佔據100％的寬度。

除此之外，<div>是block元素。 block元素需要全部可用寬度。如果你想要它只包含整個內容，給display: inline-block

2014-03-13 12:10:44

只是爲了澄清，即使只有200px值得孩子的默認div將擴大最大可用寬度？原因是因爲它被設置爲默認顯示：block？ – Adithya

塊元素是佔用全部可用寬度的元素，並在其之前和之後有換行符。 - http://www.w3schools.com/css/css_display_visibility.asp –

回答