Блог

Главная - Вопросы по программированию - Не удается переместить мой div с помощью float-прямо внутри контейнера

Не удается переместить мой div с помощью float-прямо внутри контейнера

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

У меня есть контейнер, в котором я храню 2 div. «.logo» и «.navbar-list» как я могу переместить свой «.navbar-list» к правому краю контейнера.

Раньше все работало, но когда я переключил bootstrap на версию 4.3.1, мой div перекрывался.Я пробовал float: right, но не работает. 

 container {
  font-family: sans-serif;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  float: none;
  padding: 0;
}

.logo {
  width: 380px;
  margin-right: 0;
  position: absolute;
  height: 100%;
  margin-left: 10px;
}

.navbar-list {
  color: white;
  width: 300px;
  height: 100%;
}  
 <div class="container">
  <div class="logo">
    <a class="navbar-brand" href="#"><img src="img/640px-HSV-Logo.png" /></a>
    <h1>WITAJ W <span>DOMU!</span></h1>
  </div>
  <div class="navbar-list ">
    <ul>
      <li>
        <span class="	glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Sklep
      </li>
    </ul>
    <ul>
      <li> <button type="button" class="btn btn-danger btn-md ">
                                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span> Zaloguj się
                                </button></li>
    </ul>
  </div>
</div>

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

1. Вероятно, что-то перезаписывает ваш стиль, попробуйте использовать float: right !important;

2. Поплавки, как правило, являются последним средством, воспользуйтесь сеткой и утилитами верстки , чувак, и перестаньте повторяться с ненужными дополнительными css.

Ответ №1:

Существует множество методов достижения желаемого результата! На мой взгляд, Flexbox был бы вашим лучшим вариантом. Вы должны добавить display: flex в свой .container . Вы также можете добавить flex в .logo контейнер, если хотите, чтобы логотип и h1 располагались рядом.

Вам также следует избегать использования float , поскольку это часто приводит к неожиданному поведению HTML. Вы можете заменить это на justify-content: space-between .

Я исправил ваш пример выше, чтобы включить свои исправления:

 .container {
  font-family: sans-serif;
  padding: 0;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  width: 380px;
  /*margin-right: 0; */
  /*position: absolute; */
  height: 100%;
  margin-left: 10px;
  display: flex;
  align-items: center;
}

.navbar-list {
  color: white;
  width: 300px;
  height: 100%;
}  
 <div class="container">
  <div class="logo">
    <a class="navbar-brand" href="#"><img src="img/640px-HSV-Logo.png" /></a>
    <h1>WITAJ W <span>DOMU!</span></h1>
  </div>
  <div class="navbar-list ">
    <ul>
      <li>
        <span class="	glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Sklep
      </li>
    </ul>
    <ul>
      <li> <button type="button" class="btn btn-danger btn-md ">
                                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span> Zaloguj się
                                </button></li>
    </ul>
  </div>
</div>

Ответ №2:

С высокого уровня методом перехода к этой ситуации является использование flexbox вместо floats. Не уверен в Bootstrap в вашем случае или почему у вас произошло это изменение.

 .container {
    display: flex;
    justify-content: flex-end; /* and many more positioning options */
}

Ответ №3:

просто добавьте float: right; в свой .navbar-list css, тогда вы сможете переместить свой div в правую сторону

  .navbar-list {
   color: white;
   width: 300px;
   height: 100%;
   float: right;
}