固定 div 旁边的流体 div

Question

我有Bootstrap framework 作为网站的基础。 现在，主要内容是 1000px 宽。 然后我有这个 100% 宽的区域，在其中我有 1000px 的区域。 但是……

1. 左侧部分固定宽度为 290 像素。
2. 右边的长部分是流体宽度，从左边部分的边界开始，到 100% 宽的容器结束的地方结束。
3. 右侧长部分内部是710px的固定内容。

我想要流畅的宽度正确的内容。 图片滑块或谷歌地图之类的。

我认为基本的html应该是：

<div class="wide_container">
 <div class="container1000px">
  <div class="left290px">
  </div>
  <div class="rightFluid">
   <div class="right710px">
     But inside of this the image slider should be wider than 710px.
     And this website is responsive, too.
   </div>
  </div>
 </div>
</div>

非常感谢您的任何想法！

(Full image)

Answer 1

将 .rightFluid 设置为 min-width:710px 并添加类 pull-right。

.rightFluid{
     min-width:710px;
}

<div class="rightFluid pull-right">

我认为，这应该可行。

您可以在此处查看参考：http://jsfiddle.net/ashishanexpert/B8L6L/

Answer 2

为此你需要使用像表格这样的结构 -->

右框将是流畅的

<div class="table row-fluid">

    <div class="left-box"></div>

    <div class="center-box"></div>

    <div class="right-box"></div>

</div>

<style>

.table {
    display : table;
}

.table > .div {
    display: table-cell;
}

.left-box {
    width: fixed-with;
}

.center-box {
    width: fixed-with;
}

</style>

Answer 3

在那张照片中，我看到你需要左侧的流动空间，我不知道宽度的规则应该是什么（流动 - 与父标签相关的东西），无论如何，这个链接可能会通过额外的关于如何的信息来帮助你这是工作， Check here

在那个链接中你看到了灰色部分，那个灰色部分是流动的，其他颜色部分得到了固定宽度，在任何表格中，如果你对某个表格单元格使用固定宽度并留下其他没有设置它们将填充的任何宽度提醒宽度 n 如果这个答案没有帮助，那一定是我对你的问题的误解

.table {
    display : table;
    height: 400px;
    width: 100%;     
    background-color: #808080;
}

.table > div {
    display: table-cell;
}

.right-box {
    width: 300px;
    background-color: blue;
}

.center-box {
    width: 100px;
    background-color: red;
}

Answer 4

好家伙，终于找到solution

HTML：

<div class="table">
<div class="row hidden">
<div class="cell"></div>
<div class="cell-centered">fixed width 600px; row in yellow just to show cell alignment, actually goes "hidden"</div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell">
</div>
<div class="cell-fixed"><div class="fixed"><br>fixed width 200px<br><br></div></div>
<div class="cell relative">
<div class="outer absolute"><div class="inner absolute">100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100%</div></div>
</div>
</div>
</div>
<div class="container"></div>

CSS：

body {margin: 0; text-align: center;}

.table {width: 100%; position: fixed; top: 50px;}
.row {display: table-row;}

.cell {
background: #ccc;
display: table-cell;
width: 50%;
}

.cell-centered {
background: #aaa;
display: table-cell;
min-width: 600px;
}
.cell-fixed {
background: #bbb;
display: table-cell;
min-width: 200px;
}

.fixed {
background: #1dcf53 ;
width: 200px;
}

.hidden .cell {background: #f0ff00 ;}
.hidden .cell-centered {background: #e0ee00;}
.relative {position: relative;}
.absolute {position: absolute;}

.outer {
width: 100%;
padding-right: 400px;
right: 0;
}

.inner {
background: #1dcfa6;
width: 100%;
right: 0;
}

.container {
background: #eee;
width: 600px;
height: 300px;
margin: auto;
}