3 div, одна фиксированная ширина

Я не уверен, что это возможно в html css.3 div, одна фиксированная ширина

У меня есть 3 divs в одной строке Второй div должен занимать 200px ширину, а первый & Последний div должен занимать оставшуюся ширину.

http://jsfiddle.net/Garav/gk9t3/

остальные две дивы фиксируются на 100px в скрипку. есть ли способ заставить их заполнить оставшиеся экраны одинаково на обеих сторонах, так что второй div всегда остается в центре?

Примечание: ширина родительского div не фиксирована.

источник

2012-04-24 Gaurav Shah

Вы хотите дивы на полях, чтобы содержать что-то, или просто для заполнения пустое пространство, а среднее - центрированное. Было бы хорошо, если средний div находится внутри другого div со 100% шириной и центрирован? – gabitzish

средний, чтобы быть центрированным, а остальные 2 divs будут в основном иметь фоновое изображение повтора, занимающее оставшееся пространство –

ok. Я отправлю решение. Проверьте это – gabitzish

Просто используйте марку: 0 auto; нет необходимости в маржинальных дивы: http://jsfiddle.net/gk9t3/3/

источник

2012-04-24 11:50:13 Paul

Мне нужно 3 divs. остальные два будут иметь фоновое повторение изображения. –

Вы можете добавить фоновое изображение в родительский div. – Paul

Предполагая, что страница имеет фон .. и центральное изображение имеет прозрачные части где-то .. так что, очевидно, вы не захотите, чтобы «прозрачная» задняя сторона была видна под прозрачной частью изображения центра. –

Я добавил средний div внутри другого div и центрировал его. См., Если это соответствует вашим требованиям: http://jsfiddle.net/gk9t3/1/

источник

2012-04-24 11:47:47 gabitzish

200px не всегда должно быть 20% .. думаю, abt мобильные устройства –

Вы можете установить желаемую ширину в .image-placeholder в части css. Это может быть 200px, или 20%, или сколько вы хотите :) – gabitzish

thats то, что я не хочу устанавливать отдельно для мобильных устройств, пэдов, рабочих столов –

Доказательство: http://jsfiddle.net/5Br5A/

CSS

.image-placeholder{ 
    background: #0f0; 
    width: 200px; 
    height : 200px; 
    clear:none; 
    float: left; 
} 
.fill-remaining { 
    height:200px; 
    width:50%; 
    clear:none; 
} 
.fill-remaining.left { 
    background:#f00; 
    float: left; 
    margin-right:-100px; 
} 
.fill-remaining.left>div { 
    padding-right: 100px; 
} 
.fill-remaining.right { 
    background:#00f; 
    float: right; 
    margin-left:-100px; 
} 
.fill-remaining.right>div { 
    padding-left: 100px; 
}

HTML

<div class="fill-remaining left"> 
</div> 
<div class="fill-remaining right"> 
</div> 
<div class="image-placeholder"> 
</div>

источник

2012-04-24 12:00:07 iambriansreed

cool solution bro .. теперь я должен взвесить между -ve margin & table свойствами –

Обновлен в случае, если вы будете использовать боковые панели для контента. – iambriansreed

3 div, одна фиксированная ширина

ответ

Смежные вопросы