当屏幕调整大小时，父div不包裹子div

我试图通过使用Codeacademy学习HTML/CSS和JavaScript + jQuery并在自己的小项目上进行练习。然而，我坚持一个非常简单的问题：当屏幕调整大小时，父div不包裹子div

我想要一个父div显示在整个页面。我可以成功地做到这一点（请参阅小提琴手）。但是，当我调整浏览器屏幕时，我的父div不再适合整个页面，这会导致其最右侧的子div显示在父div之外（请参阅fiddler）。基本上，我希望我的父母div始终包装其子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

回答

相关问题