1

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

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

    +-------------------------------------------------- ------------------------------------+
    |+---------------+ +--------+ +---------- ---+ +---------------+|
    ||第 1 部分 | |第 2 部分 | |第 3 部分 | |第 4 部分 ||
    ||宽度：n 像素 | |宽度：n px | |宽度：50 像素 | |宽度：n 像素 ||
    |+---------------+ +--------+ +---------- ---+ +---------------+|
    +-------------------------------------------------- ------------------------------------+

因此 div1、div2 和 div4 需要具有相同的宽度，而 div3 的静态宽度为 50px。

到目前为止，我已经使用一些辅助容器实现了这一点：

    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（不使用表格）来解决这个用例？

提前致谢，

格力兹，

哈拉尔

4

3 回答 3

2

虽然在旧浏览器中有点不受支持，但我建议使用 calc()。您的 3 个 div 宽度可能等于width:calc(33% - 50px / 3)50 像素宽的 div 仍然可以设置为width:50px.

于 2013-07-24T06:27:18.847 回答
0

我想这就是你所需要的，不是处理宽度的最佳方法，但我想这涵盖了比 calc() 更多的浏览器

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);
});
于 2013-07-24T07:02:52.433 回答
0

我认为它可以通过保证金财产来管理。

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-24T07:09:27.457 回答