並排兩個div，一個固定寬度，水平滾動

我知道這個問題已經被無數次的回答了，但是我還沒有找到適合我的特殊情況的解決方案。並排兩個div，一個固定寬度，水平滾動

我需要兩個並排的div，左側固定寬度，右側柔性寬度。注意：如果第二個div有很長的不可打開的內容，我需要該頁面有一個水平滾動條。

HTML：

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

CSS：

.left{width:50px;float:left} 
.right{overflow:hidden}

它的工作原理，但如果有合適的div有一些很長的unwrappable內容 - 我希望頁面有一個水平滾動。目前這只是CUT的權利。見https://jsfiddle.net/7qps3dm1/

PS。我知道我可以用桌子做。

來源

2015-11-04 Alex

Flexbox的一個選項？ – j08691

如果可能的話，需要跨瀏覽器的解決方案 – Alex

跨瀏覽器有多遠？ Flexbox在每個主要瀏覽器中均可用，並返回到IE10 – j08691

-1

使用你原來的代碼稍加調整：https://jsfiddle.net/JTBennett/7qps3dm1/6/

overflow:scroll;

不幸的是，這也將垂直，如果你在你的內容有換行符比格高度長滾動。你還好嗎？

來源

2015-11-04 21:12:57 Joel

我需要頁面滾動，而不是div – Alex

有點結算後，我想你需要自動換行： https://jsfiddle.net/7qps3dm1/15/

.left { 
 
    width: 50px; 
 
    float: left; 
 
    background: blue 
 
} 
 
.right { 
 
    overflow: visible; 
 
    background: red; 
 
    word-wrap: nowrap; 
 
    margin-left: 50px; 
 
}

<div class="left">left</div> 
 
<div class="right">unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_ 
 
    <img 
 
    src="http://lorempixel.com/200/200" />Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 
 
    Mauris placerat eleifend leo.</div>

從我的評論顯示錶的行爲：

.left { 
 
    width: 50px; 
 
    background: blue 
 
} 
 
.right { 
 
    background: red 
 
} 
 
/* lets use display:table; behavior from CSS 2.1 */ 
 
html { 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
} 
 
body { 
 
    display: table-row; 
 
} 
 
.left, 
 
.right { 
 
    display: table-cell; 
 
}

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

來源

2015-11-04 21:21:51

可能是因爲紅色內容低於藍色內容。他要求它並排。對我來說，這聽起來像是一個固定的高度或東西 - 不是我雖然;） – Chizzle

@Chizzle，哈哈我沒有注意到。固定一個保證金。這個問題仍然需要澄清:)，你有沒有看過一個長的字;） –

不，我還沒有看到一個長的哈哈。我正在嘗試類似於其他div的寬度相同的想法。我覺得我已經完成了OP以前偶然要求的許多次，但現在我想這樣做，沒有運氣！ – Chizzle

-1

通過使用絕對定位與固定寬度的DIV的偏移和min-width: 100%;，我能得到以下結果：

Fiddle

.left { 
 
    width: 50px; 
 
    float: left; 
 
    background: blue; 
 
    height: 100%; 
 
    z-index: 99999999; 
 
    position: relative; 
 
} 
 
.right { 
 
    float: none; 
 
    position: absolute; 
 
    min-width: 100%; 
 
    height: 500px; 
 
    background-color: red; 
 
} 
 
.right_content { 
 
    position: absolute; 
 
    left: 50px; 
 
    background-color: red; 
 
    max-height: 100%; 
 
} 
 
.container { 
 
    height: auto; 
 
    overflow: hidden; 
 
    height: 500px; 
 
    margin-top:10px; 
 
}

<div class="container"> 
 
    <div class="left">left</div> 
 
    <div class="right"> 
 
     <div class="right_content" 
 
        >unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_content_unwrappable_con 
 
      <img src="http://cdn.sstatic.net/stackoverflow/img/sprites.svg" style=" width: 2000px; height: 500px;"> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="left">left</div> 
 
    <div class="right"> 
 
     <div class="right_content">100 % width content</div> 
 
    </div> 
 
</div>

來源

2015-11-04 22:21:10 Chizzle

並排兩個div，一個固定寬度，水平滾動

回答

相關問題