Родительский div, не обертывающий дочерний div при изменении размера экрана

Question

Я пытаюсь изучить HTML/CSS и JavaScript + jQuery с помощью Codeacademy и работать над своим собственным небольшим проектом на практике. Тем не менее, я застрял в очень простой проблеме:

Я хочу, чтобы родительский div отображался на всей странице. Я могу сделать это успешно (см. Скрипач). Однако, когда я изменяю размер экрана браузера; мой родительский div больше не подходит по всей странице, что приводит к тому, что его правый дочерний div будет отображаться вне родительского div (см. скрипач). В принципе, я хочу, чтобы мой родительский div всегда переносил свои дочерние div и всегда отображался по всему экрану.

Скрипач Ссылки:

• Link 1
• Link 2

Соответствующие 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; 
} 

Любая помощь будет оценена по достоинству. Я просмотрел многие поисковые запросы Google и другие записи stackoverflow, но ничего не работает для меня, если я полностью не упустил соответствующий пост. Использование таких вещей, как «переполнение: скрытое» или создание обертки div, на самом деле не работало для меня. Заранее благодарю вас за любые предложения. Было бы здорово, если бы кто-нибудь мог указать мне на подходящую должность, которую я, возможно, тоже пропустил.

Answer 1

мне удалось найти решение моей проблемы. Проблема не в моей недопустимой разметке; это был фактически CSS для моего идентификатора #topnav. Вот как я изменил этот идентификатор, чтобы получить результат, который мне нужен:

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

Ключи изменения находятся ниже свойства height.

Answer 2

Как избавиться от тега 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