html宽度设置为剩下的百分比,如何设置div以占用剩余宽度的百分比

4 个答案:

答案 0 :(得分：3)

答案 1 :(得分：1)

如果您愿意更改HTML标记，这是一种方法。

在父display: table元素上使用.wrap并定义三个子单元格，左侧和右侧的宽度为50％。这三个子单元格中的每一个都将包含一个嵌套的CSS表.cwrap。

然后，您可以在最内层元素上使用display: table-cell，并根据需要指定20％和30％的宽度。

根据内容，中间单元格将根据需要进行调整。

＆＃13;

＆＃13;

.wrap, .cwrap {

width: 100%;

border: 1px dotted blue;

display: table;

}

.c1 {

display: table-cell;

width: 50%;

border: 1px dotted gray;

}

.c2 {

display: table-cell;

border: 1px dotted gray;

}

.cc1 {

display: table-cell;

width: 20%;

border: 1px dotted gray;

}

.cc2 {

display: table-cell;

width: 30%;

border: 1px dotted gray;

}＆＃13;

Should take 20%

Should take 30%

Something

 / 

Something

Should take 30%

Should take 20%

＆＃13;＆＃13;＆＃13;

答案 2 :(得分：0)

我认为您正在寻找css calc()功能。

按如下方式使用：

示例：calc(20% - 20px)

这样您可以使用百分比和px / em来计算宽度/高度。

进一步解释here。

答案 3 :(得分：0)

Should take 30%

Something

 / 

Something

Should take 30%

Should take 20%

#outer {

min-width: 2000px;

position: relative;

padding: 0px;

}

#1{

width: 20%;

display:inline-block;

}

#2{

width: 30%;

display:inline-block;

}

#3{

width: 2em;

display:inline-block;

}

#4{

width: 1em;

display:inline-block;

}

#5{

width: 2em;

display:inline-block;

}

#6{

width: 30%;

display:inline-block;

}

#7{

width: 20%;

display:inline-block;

}