Как разместить три div в html по горизонтали?

Я создаю образец веб-сайта, который имеет три раздела по горизонтали. Я хочу, чтобы левая часть div была 25% шириной, средняя была шириной 50% и имела право ширины 25%, так что подразделения заполняли все 100% пространства по горизонтали.

<html>
    <title>
    Website Title
    </title>

    <div id="the whole thing" style="height:100%; width:100%" >

        <div id="leftThing" style="position: relative; width:25%; background-color:blue;">
            Left Side Menu
        </div>

        <div id="content" style="position: relative; width:50%; background-color:green;">
            Random Content
        </div>

        <div id="rightThing" style="position: relative; width:25%; background-color:yellow;">
            Right Side Menu
        </div>

    </div>
</html>

http://imgur.com/j4cJu

Когда я выполняю этот код, divs появляются друг над другом. Я хочу, чтобы они появлялись рядом друг с другом!

Как я могу это сделать?

Ответ 1

Я бы воздержался от использования float для такого рода вещей; Я бы предпочел использовать inline-block.

Еще несколько замечаний:

Встраиваемые стили плохо подходят для обслуживания
У вас не должно быть пробелов в именах селекторов
Вы пропустили некоторые важные HTML-теги, например <head> и <body>
Вы не включили doctype

Здесь лучший способ отформатировать документ:

<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#container {height: 100%; width:100%; font-size: 0;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;}
#left {width: 25%; background: blue;}
#middle {width: 50%; background: green;}
#right {width: 25%; background: yellow;}
</style>
</head>
<body>
<div id="container">
    <div id="left">Left Side Menu</div>
    <div id="middle">Random Content</div>
    <div id="right">Right Side Menu</div>
</div>
</body>
</html>

Здесь jsFiddle для хорошей оценки.

Ответ 2

Вы можете использовать плавающие элементы так:

<div id="the whole thing" style="height:100%; width:100%; overflow: hidden;">
    <div id="leftThing" style="float: left; width:25%; background-color:blue;">Left Side Menu</div>
    <div id="content" style="float: left; width:50%; background-color:green;">Random Content</div>
    <div id="rightThing" style="float: left; width:25%; background-color:yellow;">Right Side Menu</div>
</div>

Обратите внимание на переполнение: hidden; в родительском контейнере, это означает, что родительский рост имеет те же размеры, что и дочерние элементы (в противном случае он будет иметь высоту 0).

Ответ 3

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

#container {
  height: 100%;
  width: 100%;
  display: flex;
}
#leftThing {
  width: 25%;
  background-color: blue;
}
#content {
  width: 50%;
  background-color: green;
}
#rightThing {
  width: 25%;
  background-color: yellow;
}

<div id="container">

  <div id="leftThing">
    Left Side Menu
  </div>

  <div id="content">
    Random Content
  </div>

  <div id="rightThing">
    Right Side Menu
  </div>

</div>

Ответ 4

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

Не очень хорошая практика кодировать встроенный css, а также ID для всех внутренних div, всегда старайтесь использовать класс для стилизации. Использование встроенного css - очень плохая практика если вы пытаетесь стать профессиональным веб-дизайнером.

здесь, в вашем вопросе Я дал класс оболочки для родительского div, и все внутренние div являются дочерними div в css, вы можете вызвать внутренний div, используя селектор nth-child.

Я хочу указать несколько вещей здесь

1 - Не используйте встроенный css (это очень плохая практика)

2 - Попробуйте использовать классы вместо id, потому что если вы укажете идентификатор, вы можете использовать его только один раз, но если вы используете класс, вы можете использовать его много раз, а также можете стилизовать их с помощью этого класса, чтобы вы пишете меньше кода.

здесь вы можете больше узнать об этом селекторе

ссылка для моего ответа

 <html>
    <title>
    Website Title
    </title>

   <style>.wrapper{width:100%;}
.box{float:left; height:100px;}
.box:nth-child(1){
   width:25%;
   background-color:red; 

}
.box:nth-child(2){
   width:50%;
  background-color:green; 
}
.box:nth-child(3){
   width:25%;
  background-color:yellow; 
}
</style>

    <div class="wrapper">

    <div class="box">
    Left Side Menu
    </div>

    <div class="box">
    Random Content
    </div>

    <div class="box">
    Right Side Menu
    </div>

    </div>
</html>

Ответ 5

Вы добавляете

float: left;

в стиле трех элементов и убедитесь, что родительский контейнер имеет

overflow: hidden; position: relative;

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

<html>
    <head>
        <title>Website Title </title>
    </head>
    <body>
        <div id="the-whole-thing" style="position: relative; overflow: hidden;">
            <div id="leftThing" style="position: relative; width: 25%; background-color: blue; float: left;">
                Left Side Menu
            </div>
            <div id="content" style="position: relative; width: 50%; background-color: green; float: left;">
                Random Content
            </div>
            <div id="rightThing" style="position: relative; width: 25%; background-color: yellow; float: left;">
                Right Side Menu
            </div>
        </div>
    </body>
</html>

Также обратите внимание, что ширина ширины: 100% и высота: 100% необходимо удалить из контейнера, в противном случае третий блок будет перенесен на вторую строку.

Ответ 6

Избавьтесь от position:relative; и замените его на float:left; и float:right;.

Пример в jsfiddle: http://jsfiddle.net/d9fHP/1/

        <html>
<title>
Website Title </title>
<div id="the whole thing" style="float:left; height:100%; width:100%">
    <div id="leftThing" style="float:left; width:25%; background-color:blue;">
         Left Side Menu
    </div>
    <div id="content" style="float:left; width:50%; background-color:green;">
         Random Content
    </div>
    <div id="rightThing" style="float:right; width:25%; background-color:yellow;">
         Right Side Menu
    </div>
</div>
</html>