CSS流体箱，带3个流体柱

Question

我有一个div容器，它是流动的：

width: 97%;
min-height: 80px;
-webkit-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.45);
-moz-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.45);
box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.45);
background: white;
margin-bottom: 20px;
margin: auto auto;
max-width: 880px;

在这个div内部，我想要一个3列布局：

  

  
1. 列是固定宽度。
  
2. 列是流体宽度。
  
3. 列再次固定宽度。
  

这里是为了更好地理解我想要的东西

代码（https://jsfiddle.net/ukgvexsu/）

.post_wrapper {
  width: 97%;
  min-height: 80px;
  -webkit-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.45);
  -moz-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.45);
  box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.45);
  background: white;
  margin-bottom: 20px;
  margin: auto auto;
  max-width: 880px;
}
.post_image {
  background-position: center;
  min-height: 60px;
  width: 60px;
  border-style: solid;
  border-color: #91A9A7;
  border-radius: 3px;
  border-width: 4px;
  margin-top: 5px;
  margin-left: 5px;
  float: left;
}
.post_1 {
  float: left;
  min-height: 10px;
  background: red;
  margin-top: 5px;
  min-width: 10%;
  max-width: 70%;
  margin-left: 5px;
}
.post_2 {
  float: right;
  min-height: 10px;
  width: 110px;
  margin-top: 5px;
  border-left: 1px solid black;
  padding-left: 5px;
}
.post_datum {
  margin-top: 5px;
  margin-left: 5px;
  font-size: 12px;
}
.post_text {
  padding: 5px;
  min-height: 40px;
  font-size: 14px;
  margin-bottom: 3px;
  line-height: 18px;
  font-size: 14px;
  width: 70%;
}

<div class="post_wrapper">
  <div class="post_image"></div>
  <div class="post_1">
    <div class="post_datum"><a href="./index.php?act=profil&amp;id=960bd310d33a704d836f19e39f61f3e2">USER XXXXXX</a> - 01.02.2016 - 21:06 Uhr</div>
    <div class="post_text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</div>

  </div>
  <div class="post_2">vxcvc</div>
  <div class="clear"></div>
</div>

Answer 1

你可以这样试试：

<div class="LeftFixedWidth">
</div>
<div class="MiddleFluidWidth">
    <div class="MiddleContentWrapper">
        <!-- Put your content here -->
    </div>
</div>
<div class="RightFixedWidth">
</div>

并将其设为这样：

.LeftFixedWidth {
    position: fixed;
    left: 0;
    top: 0;
    width: 200px;
}
.RightFixedWidth {
    position: fixed;
    right: 0;
    top: 0;
    width: 200px;
}
.MiddleFluidWidth {
    padding-left: 200px;
    padding-right: 200px;
}

填充值应根据固定列的宽度

相同

Answer 2

小提琴：https://jsfiddle.net/bdc13xpj/1/

对于这种布局，您必须使用var myvar = 4,7 //Error myvar2 = 3,4 //No error 函数。

注意浏览器支持：http://caniuse.com/#search=calc()

所有你需要的是边元素的固定宽度，然后使用calc（）来计算中间div的宽度。

例如：

calc()

Answer 3

我认为您可以使用calc css3函数来实现此目的。

这是compatibility reference。

＆＃13;

＆＃13;

div{
  display:block;
  width:100%;
  float:left;
  background-color: #607D8B;
  padding: 10px;
  box-sizing: border-box;
}

span {
    display: block;
    float: left;
    border: 1px solid white;
    background-color: #3F51B5;
    height: 100px;
    box-sizing: border-box;
}

span.fixed_width {
    width: 30px;
}

span.fluid_width {
    width: calc(100% - (30px * 2));
    background-color: #2196F3;
}

＆＃13;

<div>
  <span class="fixed_width"></span>
  <span class="fluid_width"></span>
  <span class="fixed_width"></span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

请试试这个：

.post_wrapper {
    width: 97%;
    min-height: 80px;
    -webkit-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.45);
    -moz-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.45);
    box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.45);
    background: white;
    margin-bottom: 20px;
    margin: auto auto;
    max-width: 880px;
    display:table;
}

.post_image {
    background-position: center;
    min-height: 60px;
    width: 60px;
    border-style: solid;
    border-color: #91A9A7;
    border-radius: 3px;
    border-width: 4px;
    margin-top: 5px;
    margin-left: 5px;
    float: left;
}

.post_1 {
    float: left;
    min-height: 10px;
    background: red;
    margin-top: 5px;
    min-width: 10%;
    max-width: 87%;
    margin-left: 5px;
    display:table-cell;
}

.post_2 {
    float: none;
    min-height: 10px;
    width: 110px;
    margin-top: 5px;
    border-left: 1px solid black;
    padding-left: 5px;
    display:table-cell;
    vertical-align:top;
}

.post_datum {
    margin-top: 5px;
    margin-left: 5px;
    font-size: 12px;
}

.post_text {
    padding: 5px;
    min-height: 40px;
    font-size: 14px;
    margin-bottom: 3px;
    line-height: 18px;
    font-size: 14px;
}

<div class="post_wrapper">
		<div class="post_image"></div>
		<div class="post_1">
		<div class="post_datum"><a href="./index.php?act=profil&amp;id=960bd310d33a704d836f19e39f61f3e2">USER XXXXXX</a> - 01.02.2016 - 21:06 Uhr</div>
		<div class="post_text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</div>
		
		</div>
		<div class="post_2">vxcvc</div>
		<div class="clear"></div>
		</div>

Answer 5

使用flex。请参阅this answer以找到解决方案。 Here是jsfiddle工作。