HTML/CSS布局-动态宽度

我是一名网络开发新手，面临以下问题：

我有一个宽度和高度未知的父div，我想将该div分为四个部分，如下所示：

+-------------------------------------------------------------------------+ |+---------------+ +--------------------+ +------------+ +---------------+| ||DIV 1 | |DIV 2 | |DIV 3 | |DIV 4 || ||width: n px | |widht: n px | |width: 50px | |width: n px || |+---------------+ +--------------------+ +------------+ +---------------+| +-------------------------------------------------------------------------+ +-------------------------------------------------------------------------+ |+---------------+ +--------------------+ +------------+ +---------------+| ||分区1 | |分区2 | |分区3 | |分区4|| ||宽度：n px |宽度：n px |宽度：50px |宽度：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" divA=“位置：绝对；宽度：66.6%” divB=“位置：绝对；左：0px；右：50px” div1=“宽度：50%” div2=“宽度：50%” div3=“位置：绝对；右侧：0px；宽度：50px” div4=“宽度：33.3%；右侧：0px” 首先，这个解决方案不能完全满足我的需要，因为div1、div2和div4没有相同的宽度。Div1/div2的宽度为（66.6%-50px）/2<33.3%，而div4的宽度正好为33.3%

第二，div3的宽度必须在两个地方定义，我觉得这有点麻烦

因此，我的问题是：

有没有办法用纯html/css（不使用表）解决这个用例

提前感谢,

格里兹

---

Harald

虽然在旧浏览器中有点不受支持，但我建议使用calc（）。您的3个div宽度可以等于

width:calc（33%-50px/3）

，50像素宽的div仍然可以设置为

width:50px

我想这是您需要的，不是处理宽度的最佳方式，但我想与calc（）相比，这涵盖了更多的浏览器

HTML

JS

---

我认为可以通过保证金资产进行管理

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

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

HTML:

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

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

只需给它们%的宽度，表格是HTML的一部分。你能粘贴你的HTML吗。事情会简单得多

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