Плавающая и ширина 100%

0

Я написал этот код:

<body>
<div>
    <div style="padding:10px;float:left;height:500px;background-color:#ff6a00;">
        Div1 -> Floated
    </div>
    <div style="padding:10px;height:600px;background-color:#5c64bb;display:-webkit-flex">
        Div2 -> Not Floated
    </div>
</div>

И результат - это изображение ниже, я мог бы достичь этого результата, используя дисплей -webkit-flex, который работает только в хроме, есть ли какая-то идея, которая может дать мне тот же результат.

Кстати, я не хочу использовать margin-left для Div2 и абсолютную позицию.

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

Теги:
css-float
webkit

2 ответа

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

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

<div style="display:table;width:100%;">
    <div style="display:table-cell;width:130px;vertical-align:top;">
        <div style="padding:10px;height:500px;background-color:#ff6a00;">
            Div1
        </div>
    </div>
    <div style="display:table-cell;vertical-align:top;">
        <div style="padding:10px;height:600px;background-color:#5c64bb;">
            Div2
        </div>
    </div>
</div>

http://jsfiddle.net/LHZKp/

Поделиться
0

Мне удалось получить аналогичный эффект, используя display: inline-block; на второй div и процентной ширине.

<div>
    <div style="padding:10px;float:left;height:500px;background-color:#ff6a00;width:15%;">
        Div1 -> Floated
    </div>
    <div style="padding:10px;height:600px;width: 80%;background-color:#5c64bb;display:inline-block;">
        Div2 -> Not Floated
    </div>
</div>

играть на скрипке

Поделиться
  • 0
    Спасибо за ваш ответ :), но, как вы видите в заголовке, я хочу установить ширину: 100% для Div2, есть способ с отображением: блок и поле слева так же, как ширина Div1.

Ещё вопросы

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