首頁>Program>source

我有两个div容器。

尽管一个需要為特定宽度,但我需要對其进行調整,以便另一个div占用其餘空間.有什麼办法可以做到吗?

.left {
    float: left;
    width: 83%;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    margin-right: 10px;
    overflow: auto;
}
.right {
    float: right;
    width: 16%;
    text-align: right;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    height: 100%;
    overflow: auto;
}
<div class="left"></div>
<div class="right"></div> <!-- needs to be 250px -->

最新回復
  • 5月前
    1 #

    See: http://jsfiddle.net/SpSjL/(調整瀏覽器的宽度)

    HTML:

    <div class="right"></div>
    <div class="left"></div>
    

    CSS:

    .left {
        overflow: hidden;
        min-height: 50px;
        border: 2px dashed #f0f;
    }
    .right {
        float: right;
        width: 250px;
        min-height: 50px;
        margin-left: 10px;
        border: 2px dashed #00f;
    }
    

    您也可以使用 display: table ,這通常是一種更好的方法:如何將輸入元素与其標簽放在同一行?

  • 5月前
    2 #

    您可以使用CSS的calc()函式。

    演示:http://jsfiddle.net/A8zLy/543/

    <div class="left"></div>
    <div class="right"></div>
    .left {
    height:200px;
    width:calc(100% - 200px);
    background:blue;
    float:left;
    }
    .right {
    width:200px;
    height:200px;
    background:red;
    float:right;   
    }
    

    希望這對您有帮助!

  • 5月前
    3 #

    這是2017年,最好的方法是使用与IE10 +相容的flexbox。

    .box {
      display: flex;
    }
    .left {
      flex: 1;  /* grow */
      border: 1px dashed #f0f;
    }
    .right {
      flex: 0 0 250px; /* do not grow, do not shrink, start at 250px */
      border: 1px dashed #00f;
    }
    
    <div class="box">
      <div class="left">Left</div>
      <div class="right">Right 250px</div>
    </div>
    

  • 5月前
    4 #

    如果您可以在源代碼中翻轉订單,則可以這樣做:

    HTML:

    <div class="right"></div> // needs to be 250px    
    <div class="left"></div>
    

    CSS:

    .right {
      width: 250px;
      float: right;
    }  
    

    示例:http://jsfiddle.net/blineberry/VHcPT/

    添加一个容器,您可以按照当前的源代碼順序和绝對位置进行操作:

    HTML:

    <div id="container">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    

    CSS:

    #container {
      /* set a width %, ems, px, whatever */
      position: relative;
    }
    .left {
      position: absolute;
      top: 0;
      left: 0;
      right: 250px;
    }
    .right {
      position: absolute;
      background: red;
      width: 250px;
      top: 0;
      right: 0;
    }
    

    在這裏, .left div从 top中隱式設置宽度 , leftright 可以填充 #container剩餘空間的樣式

    示例:http://jsfiddle.net/blineberry/VHcPT/3/

  • 5月前
    5 #

    如果可以將它们包裝在容器 <div>中 您可以使用定位来使左侧 <div> 停在 left:0;right:250px ,請參见 this demo .我現在要說的是,這在IE6中不起作用,因為它只是 <div>的一个角 可以完全放在頁面上(有關完整說明,請參见此處)。

  • c++:為什麼布林值是1位元組而不是1位大小?
  • android:从Glide庫的快取中删除圖像