Не используется Float, два столбца

dak3tt · February 1, 2018

Всем привет! Камнями не закидывайте, так как я веб-дизайнер, и решил для себя изучать html, css, js.

Для дз начал создавать свой собственный сайт, но столкнулся с такой проблемой.

Прикрепил изображение для более ясного пояснения. Я создал селектор .container-nav, в котором находятся еще два селекторы .nav-menu и .but-que , чтобы они располагались слева (меню) и справа (вопрос). Дальше создаю селектор .header-bar, в котором также два селектора .about-me и .my-projects, они должны располагаться и слева, и справа.

После поиска ответов, разных раздумий и т.п. не смог решить данную проблему ( второй скрин). Да, у меня получилось сделать с первым селектором, но когда я хочу сделать таким же способом к .header-bar, он приклеивается к .container-nav и верстка слетает...

Цитата

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" type="text/css" href="style.css">
   <title>Блог</title>
</head>
<body>
   <div class="container-nav">
       <div class="nav-menu">
           <ul>
               <li><a href="#">Резюме</a></li>
               <li><a href="#">Обо мне</a></li>
               <li><a href="#">Портфолио</a></li>
               <li><a href="#">Контакты</a></li>
           </ul>
       </div>
       <div class="but-que">
           <a href="#">Задать вопрос</a>
       </div>
   </div>
   <div class="header-bar">
       <div class="about-me">
           <a href="">s</a>
       </div>

       <div class="my-projects">
           <a href="">asdasdasd</a>
       </div>
   </div>
</body>
</html>

Цитата

@font-face {
font-family: MuseoSansRegular;
src: url('fonts/MuseoSansRegular.ttf');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: MuseoSansBold;
src: url('fonts/MuseoSansBold.ttf');
font-weight: bold;
font-style: normal;
}

*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: MuseoSansRegular;
padding: 0;
margin: 0;
}

a {
   text-decoration: none;
   font-size: 14px;
   color: #BDBDBD;
}

.container-nav {
   margin: 0 5% 20px 5%;
}

.nav-menu {
   float:left;
   padding-right: 20px;
   transition: 0.2s;
}
.nav-menu a {
   letter-spacing: 0.5px;
   margin-right: 25px;
   color: ;
}

.nav-menu a:hover {
color: #104FDC;
}

li {
   display: inline-block;
}

.but-que {
   float: right;
   transition: 0.3s;
}

.but-que a {
   border: 1px solid #EDEDED;
   border-radius: 5px;
   text-align: center;
   padding: 10px 25px 10px 25px;
}

.but-que a:hover {
   border: 1px solid #104FDC;
   color: #104FDC;
}

.header-bar {
}
.about-me {
   float: left;
}

.my-projects {
   float: right;
}

Sign In

Не используется Float, два столбца

Question

dak3tt

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information