如何漂浮中心但如果需要则向右移动？

Question

我想连续显示三列。

• 第一个是最左边的
• 中间的第二个
• 第三个是最右边的

当第一列的内容很长时，我想向第二列移动到右边。

这是我的CSS代码

undefined
{ default: {} }
{}

和HTML

"devDependencies": {
  "@babel/cli": "^7.0.0-beta.40",
  "@babel/core": "^7.0.0-beta.40",
  "@babel/node": "^7.0.0-beta.40",
  "@babel/preset-env": "^7.0.0-beta.40",
  "babel-core": "^7.0.0-bridge.0",
  "babel-jest": "^22.4.1",
  "babel-loader": "8.0.0-beta.0",
  "regenerator-runtime": "^0.11.1",
  "webpack": "^4.1.0",
  "webpack-cli": "^2.0.10",
}

您可以在此处查看结果：https://codepen.io/Jibeji/pen/qoBqjR

Answer 1

我保留了您的HTML，并改变了您的CSS。这是你在找什么？

.col {
  display: inline-block;
  float: left;
}

.column1 {
   min-width: 45%;
   vertical-align: middle;
   padding-left: 10px;
   padding-top: 3px;
}

.column2 {
   text-align: left;
   vertical-align: middle;
   padding-top: 3px;
   /* 55% - padding left - dpt - padding-right */
   max-width: -moz-calc(55% - 50px);
   max-width: -webkit-calc(55% - 50px);
   max-width: calc(55% - 50px);
}

.column3 {
  float: right;
}

Answer 2

就这么简单：

.col {
    float: left;
}

.column1 {
   min-width: 45%;
   vertical-align: middle;
   padding-left: 10px;
   padding-top: 3px;
}

.column2 {
   text-align: left;
   vertical-align: middle;
   padding-top: 3px;
}

.column3 {
  float: right;
}

Answer 3

Flexbox可以做到这一点。

＆＃13;

＆＃13;

.wrapper {
  display: flex;
  width: 80%;
  margin: 1em auto;
}

.col {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  border: 1px solid grey;
  padding: 5px;
}

.column1 {
  text-align: left
}

.column3 {
  text-align: right
}

＆＃13;

<div class="wrapper">
  <div class="col column1">
    Here is some short text
  </div>

  <div class="col column2">
    Text to be centered
  </div>

  <div class="col column3">
    XXX
  </div>

</div>

<div class="wrapper">
  <div class="col column1">
    Here is some loooooooooooongtext
  </div>
  <div class="col column2">
    Text to be centered
  </div>

  <div class="col column3">
    XXX
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;