Поплавковый элемент отодвинут от края - PullRequest
Новая
       5

Поплавковый элемент отодвинут от края

0 голосов
/ 31 мая 2018

Ожидаемое поведение : .header__main .left-col должно работать как .header__bar .left-col.Он должен плотно прилегать к краю

Проблема : .left-col не работает должным образом во второй строке с панелью поиска и девизом 

/* LAYOUT */

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

.container {
  display: block;
  position: relative;
}

.left-col {
  float: left;
}

.right-col {
  float: right;
}

.row::after {
  content: " ";
  clear: both;
  display: table;
}

/* nav */

a {
  text-decoration: none;
}

ul {
  list-style-type: none;
}


/* HEADER */
/* header__bar */

.header__bar {
  background-color: #e5e5e5;
  height: 40px;
}

.contact,
.blog,
.youtube,
.live {
  display: inline-block;
  position: relative;
  line-height: 40px;
}

.blog,
.youtube,
.live {
  margin-left: 36px;
}

.blog__description,
.youtube__description,
.live__description {
  font-size: 14px;
}

.contact__phone {
  font-size: 18px;
}

.contact__description {
  font-size: 12px;
}


/* header__main */
.header__main {
  height: 86px;
}

.motto,
.search,
.user,
.cart {
  display: inline-block;
  position: relative;
  vertical-align: top;
  line-height: 86px;
}

.motto {
  font-family: "Kristi", cursive;
}


/* header__nav */
.header__nav {
  background-color: #f8f8f8;
}

@media only screen and (min-width: 1200px) {
  .container {
    width: 1200px;
    padding-right: 15px;
    padding-left: 15px;
    margin: 0 auto;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" rel="stylesheet"/>
<div class="header__bar">
  <div class="container">
    <div class="row">
      <div class="left-col">
        <div class="contact">
          <span class="contact__phone">8 (800) 000-00-00</span>
          <span class="contact__description">Item</span>
        </div>
      </div>
      <!-- .left-col -->

      <div class="right-col">
        <div class="blog">
          <a href="#">
            <span class="blog__img"></span>
            <span class="blog__description">Item</span>
          </a>
        </div>

        <div class="youtube">
          <a href="#">
            <span class="youtube__img"></span>
            <span class="youtube__description">Item</span>
          </a>
        </div>

        <div class="live">
          <a href="#">
            <span class="live__img"></span>
            <span class="live__description">Item</span>
          </a>
        </div>
      </div>
      <!-- .right-col -->
    </div>
    <!-- .row -->
  </div>
  <!-- .container -->
</div>
<!-- .header__bar -->

<div class="header__main">
  <div class="container">
    <div class="row">
      <div class="left-col">

        <span class="motto">Motto</span>

        <div class="search">
          <form class="search__form" action="/" method="get" role="search">
            <input type="text" placeholder="Search" />
            <button>Search</button>
          </form>
        </div>
      </div>
      <!-- .left-col -->

      <div class="right-col">
        <div class="user">
          <a href="#">
            <span class="user__img"></span>
            <span class="user__name">John</span>
          </a>
        </div>

        <div class="cart">
          <a href="#">
            <span class="cart__img"></span>
            <span class="cart__description">Cart: <span id="cart__quantity"></span></span>
          </a>
        </div>
      </div>
      <!-- .right-col -->
    </div>
    <!-- .row -->
  </div>
  <!-- .container -->
</div>
<!-- .header__main -->

Ответы [ 2 ]

0 голосов
/ 31 мая 2018

Как я вижу - ожидаемое height для header__bar равно 40px, но у вас есть 42px.Итак, ваш ребенок на div больше, чем parent (это причина ваших проблем здесь).

См. Код ниже - я пометил места для необходимых изменений с помощью комментариев.

Послефрагмент кода вы найдете ссылки на полезные статьи. 

/* LAYOUT */

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

.container {
  display: block;
  position: relative;
}

.left-col {
  // left: 0;
  float: left;
}

.right-col {
  // right: 0;
  float: right;
}

.row::after {
  content: " ";
  clear: both;
  display: table;
}

/* nav */

a {
  text-decoration: none;
}

ul {
  list-style-type: none;
}


/* HEADER */
/* header__bar */

.header__bar {
  background-color: #e5e5e5;
  height: 40px;
}

.contact,
.blog,
.youtube,
.live {
  display: inline-block;
  position: relative;
  // line-height: 40px;
  vertical-align: middle; // Add this
}

.blog,
.youtube,
.live {
  margin-left: 36px;
}

.blog__description,
.youtube__description,
.live__description,
.contact__phone {
	line-height: 40px; // Add this
}

.blog__description,
.youtube__description,
.live__description {
  font-size: 14px;
}

.contact__phone {
  font-size: 18px;
}

.contact__description {
  font-size: 12px;
}


/* header__main */
.header__main {
  height: 86px;
}

.motto,
.search,
.user,
.cart {
  display: inline-block;
  position: relative;
  vertical-align: top;
  line-height: 86px;
}

.motto {
  font-family: "Kristi", cursive;
}


/* header__nav */
.header__nav {
  background-color: #f8f8f8;
}

@media only screen and (min-width: 1200px) {
  .container {
    width: 1200px;
    padding-right: 15px;
    padding-left: 15px;
    margin: 0 auto;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" rel="stylesheet"/>
<div class="header__bar">
  <div class="container">
    <div class="row">
      <div class="left-col">
        <div class="contact">
          <span class="contact__phone">8 (800) 000-00-00</span>
          <span class="contact__description">Item</span>
        </div>
      </div>
      <!-- .left-col -->

      <div class="right-col">
        <div class="blog">
          <a href="#">
            <span class="blog__img"></span>
            <span class="blog__description">Item</span>
          </a>
        </div>

        <div class="youtube">
          <a href="#">
            <span class="youtube__img"></span>
            <span class="youtube__description">Item</span>
          </a>
        </div>

        <div class="live">
          <a href="#">
            <span class="live__img"></span>
            <span class="live__description">Item</span>
          </a>
        </div>
      </div>
      <!-- .right-col -->
    </div>
    <!-- .row -->
  </div>
  <!-- .container -->
</div>
<!-- .header__bar -->

<div class="header__main">
  <div class="container">
    <div class="row">
      <div class="left-col">

        <span class="motto">Motto</span>

        <div class="search">
          <form class="search__form" action="/" method="get" role="search">
            <input type="text" placeholder="Search" />
            <button>Search</button>
          </form>
        </div>
      </div>
      <!-- .left-col -->

      <div class="right-col">
        <div class="user">
          <a href="#">
            <span class="user__img"></span>
            <span class="user__name">John</span>
          </a>
        </div>

        <div class="cart">
          <a href="#">
            <span class="cart__img"></span>
            <span class="cart__description">Cart: <span id="cart__quantity"></span></span>
          </a>
        </div>
      </div>
      <!-- .right-col -->
    </div>
    <!-- .row -->
  </div>
  <!-- .container -->
</div>
<!-- .header__main -->

Статьи

0 голосов
/ 31 мая 2018

У вас есть left, установленный на .left-col, который не будет применяться, поскольку у вас нет position установлено.Чтобы исправить это, вам нужно дать .left-col и .right-col правило position: absolute: 

/* LAYOUT */

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

.container {
  display: block;
  position: relative;
}

.left-col {
  position: absolute;
  left: 0;
  float: left;
}

.right-col {
  position: absolute;
  right: 0;
  float: right;
}

.row::after {
  content: " ";
  clear: both;
  display: table;
}

/* nav */

a {
  text-decoration: none;
}

ul {
  list-style-type: none;
}


/* HEADER */
/* header__bar */

.header__bar {
  background-color: #e5e5e5;
  height: 40px;
}

.contact,
.blog,
.youtube,
.live {
  display: inline-block;
  position: relative;
  line-height: 40px;
}

.blog,
.youtube,
.live {
  margin-left: 36px;
}

.blog__description,
.youtube__description,
.live__description {
  font-size: 14px;
}

.contact__phone {
  font-size: 18px;
}

.contact__description {
  font-size: 12px;
}


/* header__main */
.header__main {
  height: 86px;
}

.motto,
.search,
.user,
.cart {
  display: inline-block;
  position: relative;
  vertical-align: top;
  line-height: 86px;
}

.motto {
  font-family: "Kristi", cursive;
}


/* header__nav */
.header__nav {
  background-color: #f8f8f8;
}

@media only screen and (min-width: 1200px) {
  .container {
    width: 1200px;
    padding-right: 15px;
    padding-left: 15px;
    margin: 0 auto;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" rel="stylesheet"/>
<div class="header__bar">
  <div class="container">
    <div class="row">
      <div class="left-col">
        <div class="contact">
          <span class="contact__phone">8 (800) 000-00-00</span>
          <span class="contact__description">Item</span>
        </div>
      </div>
      <!-- .left-col -->

      <div class="right-col">
        <div class="blog">
          <a href="#">
            <span class="blog__img"></span>
            <span class="blog__description">Item</span>
          </a>
        </div>

        <div class="youtube">
          <a href="#">
            <span class="youtube__img"></span>
            <span class="youtube__description">Item</span>
          </a>
        </div>

        <div class="live">
          <a href="#">
            <span class="live__img"></span>
            <span class="live__description">Item</span>
          </a>
        </div>
      </div>
      <!-- .right-col -->
    </div>
    <!-- .row -->
  </div>
  <!-- .container -->
</div>
<!-- .header__bar -->

<div class="header__main">
  <div class="container">
    <div class="row">
      <div class="left-col">

        <span class="motto">Motto</span>

        <div class="search">
          <form class="search__form" action="/" method="get" role="search">
            <input type="text" placeholder="Search" />
            <button>Search</button>
          </form>
        </div>
      </div>
      <!-- .left-col -->

      <div class="right-col">
        <div class="user">
          <a href="#">
            <span class="user__img"></span>
            <span class="user__name">John</span>
          </a>
        </div>

        <div class="cart">
          <a href="#">
            <span class="cart__img"></span>
            <span class="cart__description">Cart: <span id="cart__quantity"></span></span>
          </a>
        </div>
      </div>
      <!-- .right-col -->
    </div>
    <!-- .row -->
  </div>
  <!-- .container -->
</div>
<!-- .header__main -->
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...