并排两个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，一个固定宽度，水平滚动

回答

相关问题