固定div旁边的流体div

Question

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

1. 左侧部分的固定宽度为290px。
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并添加class pull-right。

.rightFluid{
     min-width:710px;
}

<div class="rightFluid pull-right">

我认为，这应该有用。

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

Answer 2

为此你需要使用像table - ＆gt;

这样的结构

右框将是流畅的

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