Question

我想要宽度为灰色的div：（100％ - 330px）。如果两个元素都具有bg颜色，那么使用2个div元素会很容易，但我需要一个固定大小的透明元素。我知道我可以用calc（）解决这个问题，但我更愿意避免它。

＆＃13;

#transp {
  width:330px;
  float:right;
  height: 18px;
}

#grayline {
  background-color: #444;
  height: 18px;
  width: 100%;  
}

#grayline2 {
  background-color: #444;
  height: 18px;
  width: calc(100% - 330px); 
}

＆＃13;

<div>
   <!--This how it looks-->
   <div id="transp"></div>
   <div id="grayline"></div>                
</div>
<br />
<div>
   <!--This how it should look-->
   <div id="grayline2"></div>                
</div>

＆＃13;

Answer 1

从width移除.grayline并添加330px的右边距：

＆＃13;

#transp {
  width: 330px;
  float: right;
  height: 18px;
}

#grayline {
  background-color: #444;
  height: 18px;
  margin-right: 330px;
}

#grayline2 {
  background-color: #444;
  height: 18px;
  width: calc(100% - 330px);
}

＆＃13;

<div>
  <!--This how it looks-->
  <div id="transp"></div>
  <div id="grayline"></div>
</div>
<br />
<div>
  <!--This how it should look-->
  <div id="grayline2"></div>
</div>

＆＃13;

Answer 2

您可以margin-right: 330px使用.grayline

无需使用2个div

#grayline {
  background-color: #444;
  height: 18px;
  margin-right: 330px;
}

#grayline2 {
  background-color: #444;
  height: 18px;
  width: calc(100% - 330px);
}

<div>
  <!--This how it looks-->
  <div id="grayline"></div>
</div>
<br />
<div>
  <!--This how it should look-->
  <div id="grayline2"></div>
</div>

Answer 3

没有calc（）包装类div

<div>
      <div class="wrapper">

        <div class="trans-wrapper">
          <div id="transp"></div>
        </div>
        <div id="grayline"></div>
      </div>



    </div>

    <br />
    <div>
      <!--This how it should look-->
      <div id="grayline2"></div>
    </div>

.wrapper {
  display: table;
  position: relative;
  width: 100%
}

.trans-wrapper {
  display: table-cell;
  width: 1%;
  white-space: nowrap;
}

#transp {
  width: 330px;
  height: 18px;
  white-space: nowrap;
  background:red;
}

#grayline {
  background-color: #444;
  height: 18px;
  width: 100%;
  display: table-cell;
}

#grayline2 {
  background-color: #444;
  height: 18px;
  width: calc(100% - 330px);
}

Fiddler link https://jsfiddle.net/prnrjdt5/

一行中有两个div元素，但一个是透明的

3 个答案: