Как создать два элемента div, левая сторона имеет фиксированную ширину, а правая сторона имеет динамическую ширину

0

Я хочу создать два элемента div, left side имеет фиксированную ширину (ex: 200px) а right side имеет динамическую ширину (ex: 100%).

Я создал, но не работает по мере необходимости.

HTML

<div id="header">Header</div>
<div id="container">
    <div id="left">Left</div>
    <div id="right">Right</div>
</div>

CSS

div#header {
    height:70px;
    border:1px solid;
}
div#left {
    width:200px;
    height:500px;
    float:left;
    border:1px solid red;
}
div#right {
    width:100%;
    height:500px;
    float:right;
    border:1px solid green;
}

Также вы можете увидеть демо на JSFiddle

  • 0
    Я не понимаю, они не могут так вписаться. 100% говорят, что вы хотите получить полный размер родительского контейнера. Вы хотите, чтобы они перекрывали друг друга, или вы хотите, чтобы он занимал все оставшееся пространство?
  • 0
    Вы можете заключить оба в один и тот же div, расположить их влево, установить ширину левого div и просто позволить правому расширяться настолько, насколько это необходимо (не устанавливайте для него ширину). если вам нужна ширина и для второго, я бы предложил javascript и просто вычислил и установил ширину при генерации страницы
Показать ещё 2 комментария
Теги:

4 ответа

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

На правом элементе div:

1) Удалите поплавок (как указывали другие) и

2) Добавить overflow:hidden или overflow:auto создать контекст форматирования нового блока

(Для получения дополнительной информации об этом см. Раздел Как работает контекст форматирования блоков CSS?)

(Без шага 2 - правый div по-прежнему занимает 100% ширину, поэтому вы не видите левую зеленую границу)

Обновлено FIDDLE

Поделиться
  • 0
    Отлично работает на всех браузерах.
1

Удалите поплавок правого элемента. Смотрите демо здесь

div#right {
    height:500px;
    border:1px solid green;
}
Поделиться
0

Возьмите float справа...

DEMO

div#right {
    width:100%;
    height:500px;
    border:1px solid green;
}
Поделиться
  • 0
    Вам не понадобится width:100%; как его уже элемент блока.
  • 0
    @ArkoElsenaar Я знаю это, но не больно иметь его там. Просто показываю ОП, что им нужно делать с поплавком. Я уверен, что они могут понять, что div - это block элементы.
0

использовать calc css property calc (100% - 200px). Для поддержки всех новых браузеров вы можете добавить

width:calc(100% - 200px);
width: -webkit-calc(100% - 200px);
width: -moz-calc(100% - 200px);

http://jsfiddle.net/Tp7q3/1/

HTML

<div id="header">Header</div>
<div id="container">
    <div id="right">Right</div>
    <div id="left">Left</div>   
</div>

CSS

div #container{
    width:100%;
    height:500px;
}
div#header {
    height:70px;
    border:1px solid;
}
div#left {
    width:200px;
    height:500px;
    float:left;
    background-color:green;

}
div#right {
    width:calc(100% - 200px);
    width: -webkit-calc(100% - 200px);
    width: -moz-calc(100% - 200px);
    height:500px;
    float:right;
   background-color:red;
}
Поделиться
  • 0
    Не рекомендую этот, он работает, но не очень хорошо поддерживается (заказывайте браузеры), смотрите больше здесь
  • 0
    Да, я знаю. Это новая приятная функция, которая обычно работает с новыми браузерами (IE10 +, FF4 +, Safari 6+, Chrome 19+). Я хотел показать новый обходной путь.
Показать ещё 1 комментарий

Ещё вопросы

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