爲什麼div div div

我想通過嘗試在HTML/CSS中製作簡單的網站來學習HTML/CSS。到目前爲止，我已經建立了一些基本的骨架，但有些東西我無法解決。爲什麼div div div

我有一個問題，div的articlelisting，sidebar1，sidebar2放在div頁腳內，但我想div的articlelisting，sidebar1，sidebar2在頁腳之外。

下面是相關代碼： HTML：

 <!-- article listing --> 
     <div class="articlelisting"> 
      articlelisting 
     </div> 

     <!-- sidebar 1 --> 
     <div class="sidebar1"> 
      sidebar1 
     </div> 

     <!-- sidebar 2 --> 
     <div class="sidebar2"> 
      sidebar2 
     </div> 

     <!-- footer --> 
     <div class="footer"> 
      footer 
     </div>

CSS：

.articlelisting { 
display: inline; 
width: 48%; 
float: left; 
} 

.sidebar1 { 
display: inline; 
width: 24%; 
float: right; 
} 

.sidebar2 { 
display: inline; 
margin-right: 15px; 
width: 24%; 
float: right; 
} 

.footer { 
width: 100%; 
border: solid 1px red; 
}

編輯：我已經把articlelisting格。對不起，我錯過了。

我的問題是爲什麼divs articlelisting，sidebar1，sidebar2，在div頁腳內，以及如何將它們放置在div頁腳之外？

感謝

來源

2012-07-16 depecheSoul

哪裏是在你的代碼你'.articlelisting' DIV工作的例子嗎？ – LeeR 2012-07-16 07:11:35

當你設置display：inline to div標籤時，你的寬度將不起作用。 – AdityaSaxena 2012-07-16 07:12:13

你有什麼疑問..請清楚 – 2012-07-16 07:12:28

嘿，現在清楚你的頁腳這樣

.footer{ 
    clear:both; 
    overflow:hidden; 
     /// and write some properties as required to 
    }

現場演示http://tinkerbin.com/9vrEFCqo

來源

2012-07-16 07:17:32

然後把你的articlelisting，sidebar1，sidebar2在外面頁腳。

，並給

.footer { 
width: 100%; 
border: solid 1px red; 
clear:both; 
}

來源

2012-07-16 07:15:04 Prashobh

添加clear: both;到您的頁腳的風格。這可以確保頁腳保持清晰的float -ing。

.footer { 
    clear: both; <-- Add this 
    width: 100%; 
    border: solid 1px red; 
}

我張貼在jsfiddle

來源

2012-07-16 07:18:50

爲什麼div div div

回答

相關問題