Фиксированная ширина среднего div и две div-width divs с каждой стороны от нее

Я пытаюсь создать схему, в которой есть три div в div, который заполняет 100% -ную ширину страницы. Средний div будет иметь фиксированную ширину, а два внешних divs будут занимать 50% каждого оставшегося пространства. Возможно ли это с помощью CSS?Фиксированная ширина среднего div и две div-width divs с каждой стороны от нее

Я создал скрипку, который не работает, http://jsfiddle.net/6y5hn/ с моей попыткой в достижении этой цели, с помощью следующего кода:

<div id="outerbox"> 
    <div id="leftbox">(elastic width) This should occupy all the space in the grey box to the left of the red box</div> 
    <div id="centerbox">(fixed-size) should be in the center of the grey box</div> 
    <div id="rightbox">(elastic width) This should occupy all the space in the grey box to the right of the red box</div> 
</div>

С помощью CSS:

#outerbox { 
    background-color:gray; 
    margin-top:50px; 
    width:100%; 
    height:200px; 
} 

#centerbox { 
    background-color:red; 
    margin-left:auto; 
    margin-right:auto; 
    float:left; 
    height:100px; 
    width:300px; 
} 

#leftbox { 
    background-color:yellow; 
    height:300px; 
    float:left; 
} 

#rightbox { 
    background-color:pink; 
    height:300px; 
    float:left; 
}

Джеймс

источник

2013-11-12 James Stott

Не уверен, если это достижимо с использованием только CSS, но вот удобный фрагмент кода JavaScript, который может помочь вам управлять фиксированной и процент на основе страниц шириной более эффективно:

function resize() { 
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight 

if (typeof window.innerWidth != 'undefined') { 
    viewportwidth = window.innerWidth, 
    viewportheight = window.innerHeight 
} 

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) 

else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) { 
    viewportwidth = document.documentElement.clientWidth, 
    viewportheight = document.documentElement.clientHeight 
} 

// older versions of IE 

else { 
    viewportwidth = document.getElementsByTagName('body')[0].clientWidth, 
    viewportheight = document.getElementsByTagName('body')[0].clientHeight 
} 

}

Затем вы можете вызвать функцию resize() при загрузке страницы, а также при изменении размера страницы. Так что-то вроде:

<body onload="resize()">

Отсюда, потому что у вас есть вычисляемая ширина страницы, вы можете изменить ваш индивидуальный div s соответственно:

document.getElementById("leftbox").style.width = (viewportwidth - 300)/2 + "px"; 
document.getElementById("rightbox").style.width = (viewportwidth - 300)/2 + "px"; 
document.getElementById("centerbox").style.width = 300 + "px";

centerbox сохраняет фиксированный с 300 пикселей, а leftbox и rightbox имеют ширину, равную ширине экрана минус 300 пикселей, разделенную на две части.

источник

2013-11-12 18:58:24 Charles

добавить width:calc(50% - 150px); в #leftbox и #rightbox (150px = половина ширины центральной коробки)

http://jsfiddle.net/6y5hn/2/

Поддержка браузера: http://caniuse.com/calc

источник

2013-11-12 18:50:45 andi

какие браузеры поддерживают это? бог, который является такой замечательной конструкцией, спасибо! –

Просто используйте поплавок с фиксированной шириной

#fixed{float:left;width:360px;background-color:green;height:100%;color:yellow;} 

#elastic{background-color:#ddd;height:100%;color:grey;}

http://jsfiddle.net/am46bm43/

источник

2014-12-18 13:47:03

Фиксированная ширина среднего div и две div-width divs с каждой стороны от нее

ответ

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