Как расположить два элемента бок о бок, используя CSS

Я хочу расположить абзац справа от <iframe> карты Google.

Я не знаю, как показать свой код, так что вот скриншот того, что я хочу:

Ответы

Ответ 1

Просто используйте стиль float. Поместите свою карту iframe google в div-класс и в абзац другого класса div, затем примените следующие стили CSS к этим классам div (не забудьте очистить блоки после эффекта float, чтобы не создавать проблемы с блоками ниже):

CSS

.google_map{
    width:55%;
    margin-right:2%;
    float: left;
}
.google_map iframe{
   width:100%;
}
.paragraph {
    width:42%;
    float: left;
}
.clearfix{
    clear:both
}

HTML

<div class="google_map">
      <iframe></iframe>
</div>
<div class="paragraph">
      <p></p>
</div>
<div class="clearfix"></div>

Ответ 2

У вас есть два варианта float:left или display:inline-block.

Оба метода имеют свои оговорки. Похоже, что display:inline-block чаще встречается в наши дни, поскольку он позволяет избежать некоторых проблем с плавающей точкой.

Прочтите эту статью http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/ или эту http://www.vanseodesign.com/css/inline-blocks/ для более подробно обсуждение.

Ответ 3

Ни одно из этих решений не работает, если вы увеличиваете количество текста, чтобы оно было больше ширины родительского контейнера, а элемент справа все же перемещается ниже одного влево, а не остается рядом с ним. Чтобы исправить это, вы можете применить этот стиль к левому элементу:

position: absolute;
width: 50px;

И примените этот стиль к правильному элементу:

margin-left: 50px;

Просто убедитесь, что край слева для правого элемента больше или равен ширине левого элемента. Никаких плавающих или других атрибутов не требуется. Я бы предложил обернуть эти элементы в div со стилем:

display: inline-block;

Применение этого стиля может не потребоваться в зависимости от окружающих элементов

Сценарий: http://jsfiddle.net/2b0bqqse/

Вы можете видеть, что текст справа выше, чем элемент слева, очерченный черным. Если вы удалите абсолютное позиционирование и маржу и вместо этого используйте float, как предложили другие, текст справа будет опускаться ниже элемента влево

Скрипт: http://jsfiddle.net/qrx78u20/

Ответ 4

Для вашего iframe дайте внешний div с display:inline-block style display:inline-block, И для вашего абзаца div также display:inline-block

HTML

<div class="side">
    <iframe></iframe>
</div>
<div class="side">
    <p></p>
</div>

CSS

.side {
   display:inline-block;
}

Ответ 5

Как это

демонстрация

CSS

.block {
    display: inline-block;
    vertical-align:top;
}

Ответ 6

Используйте либо плавающие, либо встроенные элементы:

Пример JSBIN

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div>float example</div>
  <div><div style="float:left">Floating left content</div><div>Some content</div></div>
  <div>inline block example</div>
  <div><div style="display:inline-block">Some content</div><div style="display:inline-block">Next content</div></div>
</body>
</html>

Ответ 7

Вы можете использовать float:left для выравнивания div в одной строке.

скрипка

Ответ 8

Вы можете float элементы (оболочка карты и абзац) или использовать inline-block для обоих из них.

Ответ 9

Поместите iframe внутри <p> и сделайте iframe css

float:left; display:inline-block

Ответ 10

Оберните iframe в классе, оставив его.

Затем абзац должен быть вытеснен и направо, пока есть место для него. Затем установите ваш абзац для отображения: inline-block и добавьте левый край, чтобы его убрать.

<div class="left">
<img src="http://lorempixel.com/300/300" /> <!--placeholder for iframe-->
</div>
<p>Lorem Paragraph Text</p>


.left { float: left; }
p { display: inline-block; margin-left: 30px;  }

Здесь скрипка: http://jsfiddle.net/4DACH/

Ответ 11

дайте своим ящикам класс foo (или что-то еще) и добавьте css

.foo{
    float: left;
}