我想知道是否有人知道如何固定居中div的固定宽度并且在居中的div的两侧都有右边和左边的div弹性。居中的div具有最小宽度和最大宽度的css属性。
答案 0 :(得分: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);
}
<强> DEMO LINK 强>
答案 1 :(得分:0)
我用flexbox做了,但不能用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;
}