HTML/CSS макет - динамическая ширина

Question

I'am совершенно новый в вебе и Развитии я столкнулся со следующей проблемой:

У меня есть родительский DIV, ширина и высота неизвестно, и я хотел бы разделить это DIV на четыре части следующим образом:

 

    +-------------------------------------------------------------------------+ 
    |+---------------+ +--------------------+ +------------+ +---------------+| 
    ||DIV 1   | |DIV 2    | |DIV 3  | |DIV 4   || 
    ||width: n px | |widht: n px   | |width: 50px | |width: n px || 
    |+---------------+ +--------------------+ +------------+ +---------------+| 
    +-------------------------------------------------------------------------+ 

так div1, div2 и div4 должны иметь такую ​​же ширину, в то время как div3 имеет статический ширину 50px.

До сих пор я достиг этого с помощью некоторых вспомогательных контейнеров:

 

    divA = "position:absolute; width:66.6%" 
     divB = "position:absolute;left:0px;right:50px" 
      div1 = "width:50%" 
      div2 = "width:50%" 
     div3 = "position:absolute;right:0px;width:50px" 
    div4 = "width:33.3%;right:0px" 

Прежде всего, это решение не укомплектовать соответствует моим потребностям, так как div1, div2 и div4 не имеют одинаковую ширину. Div1/div2 будет иметь ширину (66.6% -50px)/2 < 33.3%, если div4 имеет ширину ровно 33,3%

Во-вторых, ширина div3 должна быть определена на двух местах, которые я считаю немного громоздким.

Так что мой вопрос:

Есть ли способ решить эту USECASE с чистым HTML/CSS (без использования таблиц)?

Спасибо заранее,

Greez,

Harald

Answer 1

Хотя немного не поддерживается в старых браузерах, я бы рекомендовал использовать известково(). Ваши 3 div-ширины могут быть равны width:calc(33% - 50px/3), а диапазон ширины 50 пикселей по-прежнему может быть установлен на width:50px.

Answer 2

Я думаю, это то, что вам нужно, не самый лучший способ справиться с шириной, но я предполагаю, что это охватывает больше браузеров по сравнению с известково()

http://jsfiddle.net/HD2ng/

HTML

<div id="container"> 
    <div id="twothird"> 
     <div id="div1">(66%-50px)/2</div><!-- 
    --><div id="div2">(66%-50px)/2</div><!-- 
    --><div id="div3">50px</div> 
    </div><!-- 
--><div id="onethird">33.3%</div> 
</div> 

CSS

#twothird, #onethird, #div1, #div2, #div3{ display:inline-block; height:100px; padding:0; margin:0;} 

#container{ 
    margin:0 auto; 
} 

#twothird{ 
    width:66.6666%; 
    overflow:hidden; 
} 

#div1{ 
    float:left; 
    background:#e5e6e8; 
    overflow:hidden; 
} 

#div2{ 
    float:left; 
    background:#efefef; 
} 

#div3{ 
    width:50px; 
    float:left; 
    background:#e5e6e8; 
} 

#onethird{ 
    width:33.3333%; 
    float:right; 
    background:#efefef; 
} 

JS

$(document).ready(function(){ 
var cw = ($('#twothird').width()-51)/2; 
$("#div1, #div2").width(cw); 
}); 

$(window).resize(function() { 
var cw = ($('#twothird').width()-51)/2; 
$("#div1, #div2").width(cw); 
}); 

Answer 3

Я думаю, что это можно управлять с помощью свойства margin.

CSS:

.main{ 
    width: 100%; 
    float: left; 
} 

.div1{ 
width: 33%; 
height: 250px; 
background-color:#aaa; 
float:left; 
margin-right: -20px; 
} 


.div2{ 
width: 33%; 
height: 250px; 
background-color:#bbb; 
float:left; 
margin-right: -20px; 
} 

.div3{ 
width: 50px; 
height: 250px; 
background-color:#ccc; 
float:left; 
} 

.div4{ 
width: 33%; 
height: 250px; 
background-color:#ddd; 
float:left; 
margin-right: -10px; 
} 

HTML:

<div class="main"> 
<div class="div1"><!-- --></div> 
<div class="div2"><!-- --></div> 
<div class="div3"><!-- --></div> 
<div class="div4"><!-- --></div> 
</div>