爲什麼div沒有在其父母

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<style type="text/css"> 

    div { 
     width: 60%; 
     margin: 50px 20%; 
    } 

    * { 
     font-family: "Courier New", Courier, monospace; 
    } 

    div * { 
     width: 100%; 
    } 

    h1 { 
     text-align: center; 
     font-size: 48px; 
     padding: 0px; 
     margin: 0px; 
    } 

    p.grey { 
     color: grey; 
     text-align: center; 
     font-size: 24px; 
     padding: 0px; 
     margin: 0px; 
    } 

    p#ending { 
     text-align: center; 
    } 

    ul { 
     border-top: 3px solid black; 
     border-bottom: 2px solid grey; 
     margin-top: 20px; 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 

    li { 
     color: black; 
     font-size: 18px; 
     display: inline; 
     margin-left: 50px; 
    } 

    div#images { 
     border: 1px solid black; 

    } 

    div#images>img { 
     width: 30%; 

     -webkit-filter: grayscale(100%); 
     -moz-filter: grayscale(100%); 
     -ms-filter: grayscale(100%); 
     -o-filter: grayscale(100%); 

     filter: grayscale(100%); 

     filter: gray; 
    } 

    li:hover, li:active { 
     color: red; 
    } 

</style> 
</head> 
<body> 
<div> 
    <p class="grey">THE</p> 
    <h1>ANALOG</h1> 
    <p class="grey">SPECIALISTS</p> 
    <ul> 
     <li>HOME</li> 
     <li>FOR SALE</li> 
     <li>REPAIRES</li> 
     <li>ABOUT</li> 
     <li>CONTACT</li> 
    </ul> 
    <div id="images"> 
     <img src="http://www.99-taobao.com/uploads/151109/1- 151109142014X3.jpg" alt="pic1"> 
     <img src="http://www.99-taobao.com/uploads/151109/1-151109142014X3.jpg" alt="pic2"> 
     <img src="http://www.99-taobao.com/uploads/151109/1-151109142014X3.jpg" alt="pic3"> 
    </div> 
    <p id="ending">We specialise in the sales and repair of classic keyboards, in particular 
    the Fender Rhodes, Wurlitzer EP200, and Hohner Clavinet.</p> 
</div> 
</body> 
</html>

我想這是一個愚蠢的問題，但我寫了這段html和css代碼，我想中心div＃圖像，現在它不工作，但是如果我添加margin-left：5％到div＃圖片，它將起作用。有誰知道爲什麼它是這樣的？爲什麼div沒有在其父母

結果看起來像this。

我添加了餘裕後，它運行得很好，如this。

來源

2016-06-12 司徒殘影

嘗試：margin：0 auto;在#images css塊。你的所有div被強制爲60％的寬度。所以，你有一個智慧，你可以用這個塊來定位。 –

被接受的CSS技術中心的網頁上給定格是使用：

#images { 
    margin:0 auto 
}

自動只是告訴瀏覽器元素的左側和右側之間平分的可用空間。通過可用空間，它意味着父容器的左邊和右邊之間的任何未佔用的水平空間。

你也應該使用更多的結構的div來控制佈局你的頁面上，例如：

<div id="ThisHeader"> 

    <p class="grey">THE</p> 
     <h1>ANALOG</h1> 
     <p class="grey">SPECIALISTS</p> 

     <div id="MenuMain"> 
    <ul> 
     <li>HOME</li> 
     <li>FOR SALE</li> 
     <li>REPAIRES</li> 
     <li>ABOUT</li> 
     <li>CONTACT</li> 
    </ul> 

    </div> <!-- Close Menu Main --> 

</div> <!-- Close header -->

For頭，採用100％的寬度：

 #ThisHeader { 
     width: 100%; 
      }

這將防止標題中的項目搞亂了頁面上其他項目的佈局。如果您的頭寬度爲100％，那麼浮動下方的項目不會被它弄亂。

總結會，你需要學習如何創建使用的div像頭，型主體和頁腳，控制自己的頁面上的元素將出現一個不錯的CSS網頁佈局。我會研究一些基本的CSS佈局技巧。

來源

2016-06-12 12:41:30 Atrix

您在div上放置了一個邊距，並且還將該div的所有內容設置爲width:100%。這會導致div離開中心，然後向右擴展。

如果你刪除div * { width:100%; }你會明白我的意思。

你可能想要做的是讓你的圖像浮動到左邊，並把一個overflow:auto;到div以包含所有的圖像。

來源

2016-06-12 12:15:22 Rob

爲什麼div沒有在其父母

回答

相關問題