将元素左右放置在同一条线上，如果空间不够，则左侧和左侧

Question

我想要的是什么：

当有足够的空间时，就像这样：

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

.right{
  display: inline-block;
  float: right;
}

<div class='parent'>
  <div class='left'>This should be on the left</div>
  <div class='right'>And this should be on the right :)</div>
</div>

当空间不足时，就像这样：

 <div class='parent'>
   <div class='left'>This should be on the left</div>
   <div class='right'>And this should be on the right :)</div>
</div>

我该怎么做？

Answer 1

尝试添加宽度

.left{
  display: inline-block;
  float: left;
  width: 50%
}

.right{
  display: inline-block;
  float: right;
  width: 50%
}

<强> Demo

将display: table-cell用于非宽度解决方案。并且您需要插入另一个元素来包装内容。

    .parent{
   display:table;
   width:100%
 }
 .left{
  display: table-cell;
  background:grey;
  vertical-align:top;
}
.right{
  display: table-cell;
  background: blue;
  vertical-align: top;
}
.right span{
  float:right
}

<强> DEMO 2 updated

得到你的问题;）你可以使用显示内联

 .left{
  display: inline;
  vertical-align:top;
}
.right{
  display:  inline;
  vertical-align: top;
}
.right span{
  float:right
}

<强> Demo 3

Answer 2

@media

其中一种方法可以使用media css规则：

.left{
  float: left;
}

.right{
  float: right;
}
/* run this in full page to check how it works */
@media all and (max-width:720px) {
  .right,.left {
    float:none;
  }
}

<div class='parent'>
  <div class='left'>This should be on the left</div>
  <div class='right'>And this should be on the right :)</div>
</div>

柔性

否则您可以使用flex（目前尚未与所有浏览器完全兼容）：

.parent {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
}
.left, .right{
  -webkit-flex: 1;
  flex: 1;
  min-width: 400px; /* line will break at min-width*2 */
  border: 1px solid #555;
}

<div class='parent'>
  <div class='left'>This should be on the left</div>
  <div class='right'>And this should be on the right :)</div>
</div>

flex + js

用于实现正确的文本对齐的Javascript。

function adjustRight() {
    var right = document.getElementsByClassName("greenright")[0];
    var left = document.getElementsByClassName("greenleft")[0];
    if (left.offsetLeft == right.offsetLeft) {
        right.style.textAlign = "left";
    }
    else {
        right.style.textAlign = "right";
    }
}
window.addEventListener("load", adjustRight);
window.addEventListener("resize", adjustRight);

.parent {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
}
/* `green` prefix added to be sure for unique classname` */
.greenleft, .greenright{
  -webkit-flex: 1;
  flex: 1;
  min-width: 400px; /* line will break at min-width*2 */
  border: 1px solid #555;
}

<div class='parent'>
  <div class='greenleft'>This should be on the left</div>
  <div class='greenright'>And this should be on the right :)</div>
</div>

JS

这个是完全以javascript为例的示例：

function adjustRight() {
    var right = document.getElementsByClassName("greenright")[0];
    var left = document.getElementsByClassName("greenleft")[0];
    if (left.offsetTop == right.offsetTop) {
        right.style.float = "right";
    }
    else {
        right.style.float = "left";
    }
}
window.addEventListener("load", adjustRight);
window.addEventListener("resize", adjustRight);

/* `green` prefix added to be sure for unique classname` */
.greenleft{
  float: left;
}
.greenright {
  float: right;
}

<div class='parent'>
  <div class='greenleft'>This should be on the left</div>
  <div class='greenright'>And this should be on the right :)</div>
</div>

Answer 3

.left{
  float: left;
}

.right{
  float: right;
}

<div class='parent'>
  <div class='left'>This should be on the left</div>
  <div class='right'>And this should be on the right :)</div>
</div>

或

.left{
  display: table-cell;
  background:grey;
  float: left;
  width:50%

}

.right{
  display: table-cell;
  background:grey;
  float: right;
  width:50%
}

DEMO HERE

或

.left{
  display: table-cell;
  background:grey;
  float: left;


}

.right{
  display: table-cell;
  background:red;
  float: left;


}

DEMO HERE