css как сделать два div бок о бок

0

У меня есть этот htmll

<div class="portlet" style="background-color: red; float:left">
                    <div class="portlet-header" style="width: 447px">
                        <h3>Total Calls Statuses</h3>
                    </div>
                    <div id="vertical-chart-total-calls-statuses" class="chart-holder">
                        <canvas class="overlay" width="478" height="300"></canvas>
                    </div>
                </div>


                <div class="portlet" style="background-color:green; float:right; ">
                    <div class="portlet-header" style="width: 447px">
                        <h3>Inbound</h3>
                    </div>
                    <div id="vertical-chart" class="chart-holder">
                        <canvas class="overlay" width="478" height="300"></canvas>
                    </div>
                </div>

У меня нет классов css.

это результаты

Изображение 174551

Мне нужен зеленый div, который будет рядом с красным.

как вам нравится?

это мой код

http://jsfiddle.net/Tn58S/

  • 0
    Установить float: left; для обоих дивов.
  • 0
    I don't have css classes - что это значит?
Показать ещё 12 комментариев
Теги:

3 ответа

1
Лучший ответ

Поместите все содержимое в контейнер DIV с шириной, достаточной для хранения обоих DET-портлетов, то есть с шириной 956 пикселей, так как каждый из ваших портлетов DIVS содержит CANVAS шириной 478 пикселей. Так:

<div style="width: 956px"><!-- your content here --></div>

См. Этот пример jsfiddle.

После проверки полного кода, представленного в jsfiddle, я рекомендую следующие изменения:

  • chartsclass должен быть достаточно широким, чтобы содержать его содержимое, которое составляет 958 пикселей. Поэтому добавьте max-width 958px к этому классу.
  • Поскольку вы также установили chartsclass на ширину 80%, это означает, что ширина contentArea, которая содержит chartsclass и informationClass, должна быть как минимум 1198px, так как 958 составляет 80% от 1198.
  • Поскольку для параметра InformationClass установлено значение 20%, его необходимо установить на максимальную ширину 240 пикселей.
  • Поскольку логотипArea должен быть шириной 100%, удалите float: left, чтобы он оставался как элемент уровня блока.

Я обновил ваш jsfiddle

Поделиться
0

Просто измените

<div class="portlet" style="background-color:green; float:right; ">

в

<div class="portlet" style="background-color:green; float:left; ">

и не забудьте изменить размер окна, чтобы освободить место для обоих div.

Поделиться
  • 0
    свернув ваш ответ, красный становится справа, а зеленый становится слева, но все еще над зеленым есть пространство yello
  • 0
    Я предполагаю, что вам нужно свернуть chart-holder ы chart-holder . Вы можете сделать это, добавив visibility: collapse .
Показать ещё 3 комментария
0

Установите ширину основных разделов на 50%

http://jsfiddle.net/yaHwj/

width:50 %

Поделиться
  • 0
    Я уже установил это на ширину: 80%;
  • 0
    пожалуйста, проверьте мой код jsfiddle.net/Tn58S пожалуйста
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню