Выровнять элементы <div> бок о бок

127

Я знаю, что это довольно простой вопрос, но я не могу понять его хоть убей. У меня есть две ссылки, к которым я применил фоновое изображение. Вот как это выглядит сейчас (извиняюсь за тень, всего лишь набросок кнопки):

введите описание изображения здесь

Однако я хочу, чтобы эти две кнопки были рядом. Я не могу понять, что нужно делать с выравниванием.

Вот HTML

<div id="dB"}>
    <a href="http://notareallink.com" title="Download" id="buyButton">Download</a> 
</div>
<div id="gB">
    <a href="#" title="Gallery" onclick="$j('#galleryDiv').toggle('slow');return false;" id="galleryButton">Gallery</a>     
</div>

Вот CSS

#buyButton {
    background: url("assets/buy.png") 0 0 no-repeat;
    display:block;
    height:80px;
    width:232px;
     text-indent:-9999px;
}
#buyButton:hover{
width: 232px;
height: 80px;
background-position: -232px 0;
}
#buyButton:active {
width: 232px;
height: 80px;
background-position: -464px 0;
}

#galleryButton {
    background: url("images/galleryButton.png") 0 0 no-repeat;
    display:block;
    height:80px;
    width:230px;
     text-indent:-9999px;
}
#galleryButton:hover{
width: 230px;
height: 80px;
background-position: -230px 0;
}
#galleryButton:active {
width: 230px;
height: 80px;
background-position: -460px 0;
}
css html alignment sudo rm -rf
источник
5
Первое, что приходит на ум, просто читая заголовок,float:left;
JCOC611
2
@ JCOC611: Применение float:left;к обоим сработало divотлично. Вы можете разместить свой комментарий в качестве ответа? Спасибо!
sudo rm -rf
1
И второй вариант, display: inline-block;но он менее хорошо поддерживается ...
СП
1
float: left внутри контейнера будет работать, но я бы попробовал использовать два тега <span> вместо <div> для кнопок.
shifttycow
Как уже было сказано, добавление float: left; в #buyButton и #galleryButton, затем добавьте еще один элемент с clear: both; чтобы очистить плавающий. Зачем использовать div (блочные элементы) для обертывания <a>?
ludesign

Ответы:

154

Примените float:left;к обоим вашим div, чтобы они встали рядом.

JCOC611
источник
Я ошибаюсь, или clear:both;надо куда-то заходить? Я никогда не был знатоком CSS, но мне кажется типичным, когда я вижу поплавки, чтобы также видеть зазоры.
Брэд Кристи,
4
clear:bothбудет делать с точностью до наоборот. «Элементы после плавающего элемента будут обтекать его. Чтобы избежать этого, используйте свойство clear».
JCOC611
@ JCOC611: Ах, обычно так ясно, когда вам нужна мгновенная способность плавания? Имеет смысл. Спасибо за урок. ;-)
Брэд Кристи
7
Чтобы быть «ясным» (ужасно, я знаю), вам нужно было бы использовать, <br style="clear: both;" />если бы у вас был третий div, который вы хотели бы под двумя, которые были выровнены.
ТАСС
3
@Tass, вам нужен только третий div вроде этого: <div style="clear: both;">...</div>(br не требуется)
intrepidis
137

Осторожно float: left… 🤔

… Есть много способов выровнять элементы бок о бок.

Ниже приведены наиболее распространенные способы сочетания двух элементов рядом…

Демо: просмотрите / отредактируйте все приведенные ниже примеры на Codepen.

Основные стили для всех примеров ниже…

Некоторые основные стили CSS для parentи childэлементов в этих примерах:

.parent {
  background: mediumpurple;
  padding: 1rem;
}
.child {
  border: 1px solid indigo;
  padding: 1rem;
}

плыть налево

Используя это floatрешение, я могу непреднамеренно повлиять на другие элементы. (Подсказка: вам может потребоваться clearfix .)

HTML

<div class='parent'>
  <div class='child float-left-child'>A</div>
  <div class='child float-left-child'>B</div>
</div>

CSS

.float-left-child {
  float: left;
}

Дисплей: встроенный блок

HTML

<div class='parent'>
  <div class='child inline-block-child'>A</div>
  <div class='child inline-block-child'>B</div>
</div>

CSS

.inline-block-child {
  display: inline-block;
}

Примечание : пространство между этими двумя дочерними элементами можно удалить, удалив пространство между тегами div:

display: inline-block (без пробела)

HTML

<div class='parent'>
  <div class='child inline-block-child'>A</div><div class='child inline-block-child'>B</div>
</div>

CSS

.inline-block-child {
  display: inline-block;
}

Дисплей: гибкий

HTML

<div class='parent flex-parent'>
  <div class='child flex-child'>A</div>
  <div class='child flex-child'>B</div>
</div>

CSS

.flex-parent {
  display: flex;
}
.flex-child {
  flex: 1;
}

дисплей: встроенный-флекс

HTML

<div class='parent inline-flex-parent'>
  <div class='child'>A</div>
  <div class='child'>B</div>
</div>

CSS

.inline-flex-parent {
  display: inline-flex;
}

Дисплей: сетка

HTML

<div class='parent grid-parent'>
  <div class='child'>A</div>
  <div class='child'>B</div>
</div>

CSS

.grid-parent {
  display: grid;
  grid-template-columns: 1fr 1fr
}
Бо Смит
источник
2
Да, но я слышал, что у using inline-blockесть проблемы с совместимостью. Кроме того, есть ли преимущества в использовании этого float?
sudo rm -rf
1
Да, inline-blockон новее, поэтому ваши целевые браузеры могут еще не поддерживать его (хотя для этого есть много свойств, зависящих от браузера, а также обходные пути). Преимущество состоит в том, что содержащий элемент будет обертывать элементы; с floatвам нужно будет добавить css к родительскому элементу.
Бо Смит,
12

будь проще

<div align="center">
<div style="display: inline-block"> <img src="img1.png"> </div>
<div style="display: inline-block"> <img src="img2.png"> </div>
</div>
Мигель Рао Виейра
источник