如何在CSS中获得2个固定列和1个动态列

Question

我正在处理这个问题2天。我试过“display：flex”和很多组合，但是没有人可以得到我想要的结果。

我需要CSS才能获得此布局（检查图像）。

我可能有两种不同的HTML：

<div class="container">
    <div class="item">Left Button</div>
    <div class="item">RIght button</div>
</div>

或

<div class="container">
    <div class="item">Left Button</div>
    <div class="item">Center button</div>
    <div class="item">RIght button</div>
</div>

我在CSS中设置了什么shuold以获得此布局：

检查图像中是否有两个示例。第一个HTML的第一个，第二个HTML的第二个。

基本上，我想：

• 所有项目的宽度应相同。总是。总是

• 这些物品应该接近容器宽度的33％。

• 如果我们有3个项目，则中间项目应该有10px的左右边距。但是，请记住第一点！所有项目应具有相同的宽度。这是一个重要的观点，因为你不能将20px的宽度用作边距，因为你在中间项目中的宽度将减少20px。

我尝试的其中一件事是：

.container {
    display: flex;
}

.items {
    flex: 1 0 0;
}

.items:nth-child(2) {
    margin: 0 10px;
}

但这完全错了。

我也试过这件事，但是，又错了：

.container {
    display: block;
}

.items {
    width: 33%;
}

.items:nth-child(2) {
    margin: 0 10px;
}

Answer 1

flexbox可以做到这一点。

.item {
  background: #f00;
  flex: 0 0 33.333%;
  border: 1px solid green;
}

* {
  box-sizing: border-box;
}
.container {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.item {
  background: #f00;
  flex: 0 0 33.333%;
  border: 1px solid green;
}

<div class="container">
  <div class="item">Left Button</div>
  <div class="item">RIght button</div>
</div>
<div class="container">
  <div class="item">Left Button</div>
  <div class="item">Center button</div>
  <div class="item">RIght button</div>
</div>

显然，中间边距很重要，所以我们可以回到max-width和calc（感谢Pangloss）。

.item {
  background: #f00;
  flex: 1;
  max-width: calc((100% - 20px)/3);
  border: 1px solid green;
}

* {
  box-sizing: border-box;
}
.container {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.item {
  background: #f00;
  flex: 1;
  max-width: calc((100% - 20px)/3);
  border: 1px solid green;
}
.multi .item:nth-child(2) {
  margin: 0 10px;
}

<div class="container">
  <div class="item">Left Button</div>
  <div class="item">RIght button</div>
</div>
<div class="container multi">
  <div class="item">Left Button</div>
  <div class="item">Center button</div>
  <div class="item">RIght button</div>
</div>

Answer 2

我建议使用CSS表格布局，你也可以使用flexbox来做同样的事情。每个标记可能需要一组CSS。

body {
    background: gold;
    margin: 0;
}
.container {
    display: table;
    width: calc(100% + 20px);
    margin: 0 -10px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 10px 0;
}
.item {
    display: table-cell;
    background: aqua;
}
.item:nth-child(2) {
    /* visibility: hidden; */
}

<div class="container">
    <div class="item">Left Button</div>
    <div class="item">Center button</div>
    <div class="item">RIght button</div>
</div>

<强> jsfiddle

Answer 3

你正试图做那样的事情？

＆＃13;

＆＃13;

.test{
  display:table;
  width:100%
}

.test > div{
    width: calc(100% - 66.66% - 20px);
    margin-left: 10px;
    height:20px;
    float:left;
    background-color:#e8e8e8;
}

.test > div:first-child,
.test > div:last-child {
  background-color:#C1C1C1;
  width:33.33%;
  margin: 0;
}

.test > div:last-child{
  float:right
}

＆＃13;

<div class='test'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  
</div>

<div class='test'>
  <div>1</div> 
  <div>3</div>
  
</div>

＆＃13;

＆＃13;

＆＃13;