當屏幕調整大小時，父div不包裹子div

我試圖通過使用Codeacademy學習HTML/CSS和JavaScript + jQuery並在自己的小項目上進行練習。然而，我堅持一個非常簡單的問題：當屏幕調整大小時，父div不包裹子div

我想要一個父div顯示在整個頁面。我可以成功地做到這一點（請參閱小提琴手）。但是，當我調整瀏覽器屏幕時，我的父div不再適合整個頁面，這會導致其最右側的子div顯示在父div之外（請參閱fiddler）。基本上，我希望我的父母div始終包裝其子div，並始終顯示在整個屏幕上。

提琴手鍊接：

相關HTML：

<div id="topnav"> 
      <a id="logo" class="navlink clearfix">DreamTeam</a> 
      <a id="logo" class="navlink clearfix">Strikers</a> 
      <a id="logo" class="navlink clearfix">Midfielders</a> 
      <a id="logo" class="navlink clearfix"><div class="navlink clearfix">Defenders</a> 
      <a id="logo" class="navlink clearfix">Goalkeepers</a> 
     </div>

相關CSS：

/* ID FOR PARENT DIV */ 
#topnav { 
position: relative; 
background-color: #EDEDED; 
height: 70px; 
width: 100%; 
white-space: nowrap; 
} 

#logo { 
width: 300px; 
font-weight: bold; 
margin-left: 5px; 
font-size: 28px; 
height: auto; 
} 

#lastlink { 
border: none; 
} 

/* CLASS FOR CHILD DIVS */ 
.navlink { 
position: relative; 
font-family: Century Gothic; 
height: auto; 
font-size: 24px; 
text-align: left; 
line-height: 65px; 
width: 175px; 
border-right: 1px solid #bdbdbd; 
}

任何幫助，將不勝感激。我經歷了許多谷歌搜索和其他stackoverflow的帖子，但似乎沒有爲我工作，除非我完全錯過了一個適當的職位。使用諸如「overflow：hidden」之類的東西或創建一個包裝div並不適合我。提前感謝您的任何建議。如果有人能指出我可能錯過了一個適當的帖子，那將是非常棒的。

來源

2013-06-27 dmarquez

'不是有效標記 – slash197

您不希望在內聯級別元素（如a）中包裝塊級元素（div）。就我所知，並沒有浮子這樣的東西。 – bouscher

沒有附加屏幕截圖... – otinanai

我設法找到一個解決我的問題提供了以下例子。問題不是我無效的標記;它實際上是我的#topnav ID的CSS。以下是我如何更改該ID以獲得我想要的結果：

#topnav { 
background-color: #EDEDED; 
height: 50px; 
min-width: 1050px; 
position: absolute; 
left: 0; 
right: 0; 
top: 0; 
}

關鍵更改在高度屬性下面。

來源

2013-06-28 18:43:11 dmarquez

如何擺脫標籤內的div標籤。因爲你可以使用帶有標籤的類。

查看由StackOverflow的用戶starx

CSS

a.divlink { 
    display:block; 
    width:500px; 
    height:500px; 
    float:left; 
}

HTML

<div> 
    <a class="divlink" href="yourlink.html"> 
     The text or elements inside the elements 
    </a> 
    <a class="divlink" href="yourlink2.html"> 
     Another text or element 
    </a> 
</div>

Click here for more details

來源

2013-06-27 09:06:20

當屏幕調整大小時，父div不包裹子div

回答

相關問題