HTML/CSS布局 - 动态宽度

我'在网络发展论坛很新，我面临着以下问题：HTML/CSS布局 - 动态宽度

我有一个父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具有50像素的静态宽度。

到现在为止我已经实现了这个使用一些辅助容器：

所有的

 

    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％whe4 div4的宽度恰好为33.3％

其次，div3的宽度必须在两个我觉得是有点麻烦。

所以我的问题：

有没有办法解决这个用例用纯HTML/CSS（不使用表）的方式？

由于提前，

Greez，

哈拉尔

来源

2013-07-24 user2542461

只是给他们宽度在％ – Hushme

表是HTML的一部分。 – AnaMaria

你可以粘贴你的HTML。事情会更简单 – AnaMaria

虽然有点旧的浏览器不支持，我会建议使用计算（）。您的3格宽度可能等于width:calc(33% - 50px/3)，而50像素宽格仍可以设置为width:50px。

来源

2013-07-24 06:27:18

我想这是你所需要的，而不是来处理宽度的最佳方式，但我想比计算（）

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; 
}

$(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); 
});

来源

2013-07-24 07:02:52

我认为可以通过保证金属性进行管理。

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>

来源

2013-07-24 07:09:27

HTML/CSS布局 - 动态宽度

回答

相关问题