Question

我知道这个问题已被多次回答，但我仍未找到适合我特定情况的解决方案。

我需要并排两个div，左固定宽度，右柔性宽度。注意：如果第二个div有长的不可阻止的内容，我需要页面有一个水平滚动条。

HTML：

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

CSS：

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

它可以工作，但如果正确的div有一些非常长的无法解决的内容 - 我希望页面有一个水平滚动。目前它只是右边的CUT。见https://jsfiddle.net/7qps3dm1/

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

Answer 1

经过一些清理后，我想你需要自动换行： https://jsfiddle.net/7qps3dm1/15/

＆＃13;

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

＆＃13;

<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>

＆＃13;

我评论中的显示表行为：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

使用原始代码进行微调：https://jsfiddle.net/JTBennett/7qps3dm1/6/

overflow:scroll;

不幸的是，如果你的内容中的换行符长于div高度，这也会垂直滚动。你还好吗？

Answer 3

通过使用具有固定宽度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>

两个div并排，一个固定宽度，水平滚动

3 个答案: