Question

让我们说我有7个div，其中我有几个固定宽度，其他应该占剩余宽度的一部分。

示例：

<li>
    <div id="1">Should take 20%</div>
    <div id="2">Should take 30%</div>
    <div id="3" style="width:2em">Something</div>
    <div id="4" style="width:1em">&nbsp;/&nbsp;</div>
    <div id="5" style="width:2em">Something</div>
    <div id="6">Should take 30%</div>
    <div id="7">Should take 20%</div>
</li>

好的，每个div应该有display:inline-block;或display:table-cell;。 Div 1,2,6,7总计100％剩余的地方＆＃34;，因为3,4和5将采用固定的宽度。

我怎么能实现这个目标？

重要的是div id 7采用大小直到右边界，因为文本应该向右对齐。

Answer 1

查看http://jsfiddle.net/4d3c105L/

您可以使用http://caniuse.com/#search=calc之类的

style="width:100%;height:100%;"

20％（100％ - 5em）

width: calc((100% - 5em) * 0.2);

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Answer 2

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

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

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

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

＆＃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;

<div class="wrap">
  <div class="c1">
    <div class="cwrap">
      <div class="cc1">Should take 20%</div>
      <div class="cc2">Should take 30%</div>
    </div>
  </div>
  <div class="c2">
    <div class="cwrap">
      <div class="cc3">Something</div>
      <div class="cc4">&nbsp;/&nbsp;</div>
      <div class="cc5">Something</div>
    </div>
  </div>
  <div class="c1">
    <div class="cwrap">
      <div class="cc2">Should take 30%</div>
      <div class="cc1">Should take 20%</div>
    </div>
  </div>
</div>

＆＃13;

Answer 3

<li id="outer">
     <div id="1"></div>
     <div id="2">Should take 30%</div>
     <div id="3" style="width:2em">Something</div>
     <div id="4" style="width:1em">&nbsp;/&nbsp;</div>
    <div id="5" style="width:2em">Something</div>
     <div id="6">Should take 30%</div>
     <div id="7">Should take 20%</div>
</li>

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

Answer 4

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

按如下方式使用：

示例：calc(20% - 20px)

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

进一步解释here。

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

4 个答案: