Блог

Главная - Вопросы по программированию - Как отделить два divs по вертикали друг от друга?

Как отделить два divs по вертикали друг от друга?

#html #css

#HTML #css

Вопрос:

Пока я создавал div для панели навигации, я также подумал о создании второго div, который представляет левую часть веб-сайта, с классом «left».

 #nav {
  height: 55px;
  background-color: green;
}

#nav ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

#nav ul li a {
  text-decoration: none;
  float: left;
  padding: 10px;
  line-height: 35px;
  font-size: 20px;
  display: inline-block;
  color: yellow;
}

#nav ul li a:hover {
  color: red;
  background-color: black;
}




.left {
  height: 260px;
  width: 100px;
  background-color: red;
  padding: 10px;
  border-radius: 2px;
  float: left;
}  
 <div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</div>

<div class="left"></div>

Мой вопрос: как я могу отделить раздел «панель навигации» от «левого» раздела?

Комментарии:

1. @Ryan Я никогда раньше не слышал об этой идее. Что еще вы бы порекомендовали для CSS, который можно использовать только один раз?

2. @Ryan Спасибо за информацию, мне нужно будет изучить их.

Ответ №1:

 #nav {
  height: 55px;
  background-color: green;
}

#nav ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

#nav ul li a {
  text-decoration: none;
  float: left;
  padding: 10px;
  line-height: 35px;
  font-size: 20px;
  display: inline-block;
  color: yellow;
}

#nav ul li a:hover {
  color: red;
  background-color: black;
}




.left {
  height: 260px;
  width: 100px;
  background-color: red;
  padding: 10px;
  border-radius: 2px;
  float: left;
}  
 <div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</div>
<br>
<div class="left"></div>

Вы имеете в виду вот так, с помощью простого <br> ?

 #nav {
  height: 55px;
  background-color: green;
}

#nav ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

#nav ul li a {
  text-decoration: none;
  float: left;
  padding: 10px;
  line-height: 35px;
  font-size: 20px;
  display: inline-block;
  color: yellow;
}

#nav ul li a:hover {
  color: red;
  background-color: black;
}

.left {
  height: 260px;
  width: 100px;
  background-color: red;
  padding: 10px;
  border-radius: 2px;
  float: left;
  margin-top: 2%;
}  
 <div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</div>
<br>
<div class="left"></div>

Или, альтернативно, с margin-top помощью ?

Комментарии:

1. Спасибо, оба они мне помогли!

2. @Alien Я рад помочь. 🙂