Как сделать так, чтобы 2 элемента div плавали рядом друг с другом, но при этом содержимое не следовало бы примеру?

0

Изображение 174551

У меня есть эта настройка, с HTML:

<h4 class="wrap-title">Name</h4>
                    <button class="btn btn-primary btn-xs title-button" ng-click="uploadNewImage()"><span class="glyphicon glyphicon-upload"></span> Upload</button>    
                    <p>{{venue.name}}</p>

и CSS:

.wrap-title {
  float:left;
  margin-right: 5px;
}

.title-button {
  cursor: pointer;
  margin: 10px 0px;
  float:none;
}

Как бы я хотел, чтобы кремы были под "именем"? Заранее спасибо! Я не могу для жизни понять, как почему-то.

Теги:
css-float

2 ответа

1
Лучший ответ

Может быть немного чище обернуть поплавки в div и использовать clearfix

<div class="clearfix">
   <h4 class="wrap-title">Name</h4>
   <button class="btn btn-primary btn-xs title-button" ng-click="uploadNewImage()">
       <span class="glyphicon glyphicon-upload"></span> Upload
    </button>    
</div>
<p>{{venue.name}}</p>

здесь clearfix css

.clearfix:before, .clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

Вот объяснение, приведенное в шаблоне html5

Clearfix: содержит поплавки. Для современных браузеров

  1. Содержимое пространства - это один из способов избежать ошибки Opera, когда атрибут contenteditable включен где-либо еще в документе. В противном случае это приведет к появлению пространства в верхней и нижней clearfix элементов, которые получают класс clearfix.
  2. Использование table а не block необходимо только при использовании :before содержать верхние поля дочерних элементов.
  • 0
    Спасибо! Могу ли я спросить, как это достигается с помощью содержимого / отображения?
  • 1
    Я добавил объяснение из HTML5 шаблона в ответ
1

Вам нужно очистить поплавок:

p {
clear:left:
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню