包裝緣頂部增加，如果我增加其他包裝

誰能解釋什麼是我的HTML設計腳麻包裝緣頂部增加，如果我增加其他包裝

<div id="container"> 
<div id="profile" style="width:200px;float:left;margin-top:20px"> 
<img src="./profilepic.jpg" width="190px" height="220px"/> 
</div> 
<div id="intro" style="width:420px;margin-left:15px;margin-top:30px"> 
<h3 style="background-color:#000000">Profile </h3> 
</div> 
</div>

的問題是div標籤（#profile包裝）正在增加其利潤率最高，如果我增加了#intro wrapper的margin-top，它試圖從很長一段時間開始感到沮喪，爲什麼如果我增加#intro margin top，它會增加？也是< h3>標籤的背景顏色是從圖片的上面開始的，即使我使用float但< h3>標籤的文本正常工作，我沒有說明爲什麼即時獲取這些行爲

我有爲#intro設置寬度：420px，寬度從tha頁面的最左側開始，但不是從<h3>標籤的開始，即從word概要文件開始？爲什麼它會從頁面的最左側應用背景顏色，而不是從當前位置應用背景顏色？

和工作正常，如果我使用無序列表< UL>標記而不是div。請讓我知道你的答案爲什麼它給錯了>

來源

2011-10-15 niko

起初，我不知道什麼會導致'＃profile'增加它的上邊距。我將在下面添加一個答案，以表示我想你想要做的事情。 – Ben

它看起來像你試圖讓兩個元素彼此相鄰，並有不同的頂部邊距。

CSS

.container { 
    clear: left; 
    width: 635px; 
} 
.left, 
.right { 
    float: left; 
} 
.left { 
    width: 200px; 
    margin-top: 20px; 
    margin-right: 15px; 
} 
.right { 
    width: 420px; 
    margin-top: 30px; 
} 
h3 { 
    background-color: #000; 
}

HTML

<div class="container"> 
    <div class="left"> 
     <img src="/profilepic.jpg" /> 
    </div><!-- /left --> 

    <div class="right"> 
     <h3>Profile</h3> 
    </div><!-- /right --> 
</div><!-- /container -->

來源

2011-10-15 21:10:58 Ben

謝謝我不知道，我們不得不提到浮法：左爲兩個包裝，你能解釋這是什麼原因嗎？ – niko

確保所有要橫向堆疊的元素的簡短原因是「float：left;'屬性，因爲如果不這樣做，它將無法工作。長的答案與頁面上大多數（讀取：每個）元素的默認「塊」性質有關，這意味着它們都佔據了自己的行。 – Ben

包裝緣頂部增加，如果我增加其他包裝

回答

相關問題