CSS два дива рядом друг с другом

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

<div>
    <div style="display: inline-block;">Content1</div>
    <div style="display: inline-block;">Content2</div>
</div>

обратите внимание, что использование атрибута inline style использовалось только для краткости этого примера, конечно, они были перемещены во внешний файл CSS.

к сожалению, это не тривиальная вещь, чтобы решить для общего случая. Проще всего было бы добавить свойство css-стиля " float: right; "к вашему 200px div, однако, это также приведет к тому, что ваш"main" -div на самом деле будет полной шириной, и любой текст там будет плавать вокруг края 200px-div, который часто выглядит странно, в зависимости от содержимого (почти во всех случаях, кроме если это плавающее изображение).

EDIT: Как предложил Dom, упаковка конечно, проблему можно решить с запасом. Глупый я.

метод, предложенный @roe и @MohitNanda, работает, но если правильный div установлен как float:right;, тогда он должен быть первым в источнике HTML. Это нарушает порядок чтения слева направо, что может привести к путанице, если страница отображается с отключенными стилями. Если это так, возможно, лучше использовать обертку div и абсолютное позиционирование:

<div id="wrap" style="position:relative;">
    <div id="left" style="margin-right:201px;border:1px solid red;">left</div>
    <div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>

показал:

Edit: Хм, интересно. В окне предварительного просмотра правильно отформатированные divs, но отображаемый элемент post этого не делает. Тогда извини, тебе придется попробовать самому.

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

<div style="width:100%;"> 
    <div style="float:left;">Content left div</div> 
    <div style="float:right;">Content right div</div> 
</div> 

просто сделайте Родительский div span полную ширину и плавайте divs, содержащиеся внутри.

div1 {
    float: right;
} 
div2 {
    float: left;
}

это будет работать нормально, пока вы установите clear: both для элемента, который разделяет этот блок двух столбцов.

обновление

Если вам нужно разместить элементы в ряд, вы можете использовать Гибкий Макет. Вот вам еще один Flex учебник. Это отличный инструмент CSS, и хотя он не совместим на 100%, каждый день его поддержка становится лучше. Это работает так:

HTML-код

<div class="container">
    <div class="contentA"></div>
    <div class="contentB"></div>
</div>

в CSS

.container {
    display: flex;
    width: 100%;
    height: 200px;
}

.contentA {
    flex: 1;
}

.contentB {
    flex: 3;
}

и вы получаете здесь контейнер с общим размером 4 блоков, который поделитесь пространством со своими детьми в соотношении 1/4 и 3/4.

Я сделал пример в CodePen, который решает вашу проблему. Надеюсь, это поможет.

http://codepen.io/timbergus/pen/aOoQLR?editors=110

ОЧЕНЬ СТАРЫЙ

может быть, это просто ерунда, но вы пробовали со столом? Он не использует непосредственно CSS для позиционирования divs, но он отлично работает.

вы можете создать таблицу 1x2 и поставить ваш divs внутри, а затем форматирование таблицы с помощью CSS, чтобы поместить их, как вы хотите:

<table>
  <tr>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
</table>

Примечание

если вы хотите избежать использования таблицы, как было сказано ранее, вы можете использовать float: left; и float: right;и в следующем элементе не забудьте добавить clear: left;, clear: right; или clear: both; для того, чтобы очистить позицию.

я столкнулся с той же проблемой, и версия Mohits работает. Если вы хотите сохранить свой левый-правый порядок в html, просто попробуйте это. В моем случае левый div регулирует размер, правый div остается на ширине 260px.

HTML-код

<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>

в CSS

.box {
    height: 200px;
    padding-right: 260px;
}    

.box .left {
    float: left;
    height: 200px;
    width: 100%;
}

.box .right {
    height: 200px;
    width: 260px;
    margin-right: -260px;
}

трюк состоит в том, чтобы использовать правую прокладку на главном поле, но использовать это пространство снова, поместив правую коробку снова с правым краем.

Как все отметили, вы сделаете это, установив float:right; о содержании RHS и отрицательном поле на LHS.

однако.. если вы не используете float: left; на LHS (как и Mohit), тогда вы получите эффект шага, потому что LHS div по-прежнему будет потреблять пространство margin'D в макете.

однако.. LHS float будет сжимать-обертывать содержимое, поэтому вам нужно будет вставить определенный childnode ширины, если это неприемлемо, и в этот момент Вы можете хорошо определили ширину на родителе.

однако.. как указывает Дэвид, вы можете изменить порядок чтения разметки, чтобы избежать требования LHS float, но это имеет читаемость и, возможно, проблемы доступности.

однако.. эта проблема может быть решить с поплавками с дополнительной разметкой

(предостережение: я не одобряю .очистка div в этом примере, см. здесь для подробности)

учитывая все, я думаю, большинство из нас хотели бы, чтобы была не жадная ширина:оставаясь в CSS3...

Это не будет ответом для всех, так как он не поддерживается в IE7-, но вы можете использовать его, а затем использовать альтернативный ответ для IE7-. Это дисплей: таблица, дисплей: таблица-строка и дисплей: таблица-ячейка. Обратите внимание, что это не использование таблиц для макета, а укладка дивов, чтобы все было красиво без всех хлопот сверху. Мое приложение html5, поэтому оно отлично работает.

в этой статье показан пример: http://www.sitepoint.com/table-based-layout-is-the-next-big-thing/

вот как будет выглядеть ваша таблица стилей:

 .container {
    display: table;
    width:100%;
 }

 .left-column {
    display: table-cell;
 }

 .right-column {
    display: table-cell;
    width: 200px;
 }

Я использую смесь float и overflow-x: hidden. Минимальный код, всегда работает.

https://jsfiddle.net/9934sc4d/4/ - плюс вам не нужно очистить свой поплавок!

.left-half{
    width:200px;
    float:left;
}
.right-half{
    overflow-x:hidden;
}

перефразировать один из моих веб-сайтов, который делает что-то подобное:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <style TYPE="text/css"><!--

.section {
    _float: right; 
    margin-right: 210px;
    _margin-right: 10px;
    _width: expression( (document.body.clientWidth - 250) + "px");
}

.navbar {
    margin: 10px 0;
    float: right;
    width: 200px;
    padding: 9pt 0;
}

  --></style>
 </head>
 <body>
  <div class="navbar">
  This will take up the right hand side
  </div>
  <div class="section">
  This will fill go to the left of the "navbar" div
  </div>
 </body>
</html>

просто используйте Z-индекс, и все будет хорошо. убедитесь, что позиции помечены как фиксированные или абсолютные. тогда ничто не будет двигаться, как с тегом float.