html - 三柱布局侧柱弹性中间固定

Question

我想知道是否有人知道如何使居中 div 具有固定宽度，并在居中 div 的任一侧具有左右 div 弹性。居中的 div 也具有最小宽度和最大宽度 css 属性。

Answer 1

尝试添加您在发布问题时尝试的代码。

HTML

<div class = "container">
    <div class = "fluid">
        I am fluid
    </div>

    <div class = "fixed">
        I'm Fixed! 
    </div>

    <div class = "fluid">        
        I am fluid
    </div>
</div>

​CSS

html, body {
    height: 100%;
    font-family: 'Arial', 'Helvetica', Sans-Serif;
}
.container {
    display: table;
    width: 100%;
    height: 100%;
}
.container > div {
    display: table-cell;
    text-align: center;
}
.fixed {
    min-width: 200px; max-width:300px;
    background: rgb(34, 177, 77);
    color: white;
}
.fluid {
    background: rgb(0, 162, 232);
}
​

演示链接

Answer 2

我是用 f​​lexbox 做的，但不能用 table-cell 做，因为边栏的宽度取决于边栏的内容。所以我的代码看起来像

https://codepen.io/ArunsKas/pen/owveer

HTML

<div class="flex">
  <div class="flex-children">asdaaa asdaaaasdaaa asdaaa asdaaa</div>
  <div class="flex-children-fixed">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora et nisi harum eaque quas similique esse voluptas? Expedita in vitae, vel unde deleniti hic dolores rerum. Aliquam quos quidem quae.</p>
  </div>
  <div class="flex-children">ddey</div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}
.flex {
  display: flex;
  justify-content: space-between;
}
.flex-children {
  width: calc((100% - 200px)/2 - 10px);
  background: red;
}
.flex-children-fixed {
  width: 200px;
  background: red;
}