Как выстроить три div в одной строке?

Может кто-то, пожалуйста, помогите мне с этой проблемой, поскольку я уже давно занимаюсь этим...

Я пытаюсь получить 3 divs на одной строке рядом друг с другом, один из div выглядит следующим образом:

<div>  
  <h2 align="center">San Andreas: Multiplayer</h2>  
  <div align="center">
    <font size="+1">  
      <em class="heading_description">15 pence per slot</em>  
    </font>  
    <img src="http://fhers.com/images/game_servers/sa-mp.jpg" class="alignleft noTopMargin" style="width: 188px; ">  
    <a href="gfh" class="order-small">  
      <span>order</span></a>  
  </div>

а остальные два - это те же divs, пожалуйста, помогите мне получить все три div на одной строке справа на середине и одну слева.

Ответы

Ответ 1

Я удивлен, что никто не дал CSS-таблицу в качестве решения.

Посмотрите, что Рабочее демо

Чистый CSS 2.1, Кросс-браузер (IE8 +)

HTML:

<div class="Row">
    <div class="Column">C1</div>
    <div class="Column">C2</div>
    <div class="Column">C3</div>
</div>

CSS

.Row
{
    display: table;
    width: 100%; /*Optional*/
    table-layout: fixed; /*Optional*/
    border-spacing: 10px; /*Optional*/
}
.Column
{
    display: table-cell;
    background-color: red; /*Optional*/
}

Ответ 2

Смотрите мой код

<div>
    <h2 align="center">San Andreas: Multiplayer</h2>
    <div align="center" class="float-left">CONTENT OF COLUMN ONE GOES HERE</div>
    <div align="center" class="float-left">CONTENT OF COLUMN TWO GOES HERE</div>
    <div align="center" class="float-left">CONTENT OF COLUMN THREE GOES HERE</div>
</div>

И внутри вашего файла css:

.float-left {
float:left;
width:300px; // or 33% for equal width independent of parent width
}

Ответ 3

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

.parent {
  display: flex;
  flex-direction:row;
}

.column {
  flex: 1 1 0px;
  border: 1px solid black;
}

<div class="parent">
    <div class="column">Column 1</div>
    <div class="column">Column 2<br>Column 2<br>Column 2<br>Column 2<br></div>
    <div class="column">Column 3</div>
</div>

Ответ 4

Вот два примера: http://jsfiddle.net/H5q5h/1/

используется float:left и обертка с overflow:hidden. обертка гарантирует, что родной брат обертки начинается ниже обертки.

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

Ответ 5

Старая тема, но, возможно, кому-то это понравится.

ссылка http://jsfiddle.net/74ShU/

<div class="mainDIV">
    <div class="leftDIV"></div>
    <div class="middleDIV"></div>
    <div class="rightDIV"></div>
</div>

и css

.mainDIV{
    position:relative;
    background:yellow;
    width:100%;
    min-width:315px;
}
.leftDIV{
    position:absolute;
    top:0px;
    left:0px;
    height:50px;
    width:100px;
    background:red;
}
.middleDIV{
    height:50px;
    width:100px;
    background:blue;
    margin:0px auto;
}
.rightDIV{
    position:absolute;
    top:0px;
    right:0px;
    height:50px;
    width:100px;
    background:green;
}

Ответ 6

Просто добавьте свойство float left для всех разделов, которые вы хотите создать, в строке, отличной от последней. вот пример

<div>
  <div style="float: left;">A</div>
  <div style="float: left;">B</div>
  <div>C</div>
</div>

Ответ 7

Это проще и дает цель никогда не использовать неупорядоченные/упорядоченные теги списка.

В CSS добавить:

    li{float: left;}  //Sets float left property globally for all li tags.

Затем добавьте в свой HTML:

    <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>        
    </ul>

Теперь посмотрим, как все выстроится идеально! Больше не нужно обсуждать таблицы и divs!

Ответ 8

Проверьте базовую структуру прототипирования основы, которую они обрабатывали довольно хорошо, в основном они позволяют использовать HTML следующим образом:

<div class="row">
    <div class="four columns">
    </div>
    <div class="four columns">
    </div>
    <div class="four columns">
    </div>
</div>

Это простейшая система сетки HTML/CSS, с которой я столкнулся, она основана на 12-ти столбчатой сетке.

В основном столбцам присваивается значение% width и left margin относительно родительской строки. У столбцов есть поплавок, установленный влево, позиция установлена в относительную, а дисплей настроен на блокировку.

У строки есть несколько свойств, установленных на ней, которые заботятся о ядре проблемы, которая обычно приводит к сглаживанию сдерживающего div до 0, предотвращая "нажатие" следующих divs, как они должны.

Здесь вы можете найти примеры использования базовой сетки: http://foundation.zurb.com/docs/grid.php

Если вы не хотите использовать всю фреймворк, следующий CSS должен сделать трюк с приведенным мной кодом кода:

.row:after {
    content: "";
    clear: both;
    display: table;
}

.four.column {
    float: left;
    width: 33%;
}

Если вам действительно нужна левая центральная и правая колонки, используйте код следующим образом:

CSS

.row:after {
    content: "";
    clear: both;
    display: table;
}

.left {
    float: left;
    width: 100px;
}

.center {
    margin: 0 auto;
    width: 100px;
}

.right {
    float: right;
    width: 100px;
}

HTML:

<div class="row">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</div>

Ответ 9

Поместите деления в тег 'td'. Это было сделано.

Ответ 10

2019 ответ:

Использование сетки CSS:

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}

Ответ 11

Другое возможное решение:

<div>
  <h2 align="center">
  San Andreas: Multiplayer
</h2>
    <div align="center">
<font size="+1"><em class="heading_description">15 pence per
slot</em></font> <img src=
"http://fhers.com/images/game_servers/sa-mp.jpg" class=
"alignleft noTopMargin" style="width: 188px;" /> <a href="gfh"
class="order-small"><span>order</span></a>
    </div>
 </div>

Также полезно.

Ответ 12

Почему бы не попробовать использовать загрузочные решения. Они идеально подходят, если вы не хотите вмешиваться в таблицы и плавания.

<link href="#" onclick="location.href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'; return false;" rel="stylesheet"/> <!--- This line is just linking the bootstrap thingie in the file. The real thing starts below -->

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      One of three columns
    </div>
    <div class="col-sm-4">
      One of three columns
    </div>
    <div class="col-sm-4">
      One of three columns
    </div>
  </div>
</div>