html - 具有 3 个流体列的 CSS 流体盒

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. column is fixed width.
2. column is fluid width.
3. column is again fixed width.

这里是为了更好地理解我试图得到的东西

代码(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

fiddle :https://jsfiddle.net/bdc13xpj/1/

对于这种布局，您必须使用 calc() 函数。

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

你所要做的就是固定侧边元素的宽度，然后使用 calc() 计算中间 div 的宽度。

例如:

#middle-div-fluid{
  float: left;
  width: calc(100% - 100px - 30px); /*first and second width are examples*/
}