在div中定位元素，左边有一个元素，右边有两个元素

Question

我有一个包含3个Div的Div 1,2,3并且想要1在左边，然后按顺序，2和3在右边。 1很好，但我遇到了2和3的困难，我尝试在2和3上使用浮动，但这给了我1,3,2。基本的HTML / CSS设置如下，因为我将使其响应我不能使用固定定位;

＆＃13;

＆＃13;

    		.main {
    		  background-color: #cccccc;
    		  width: 100%;
    		  height: 250px;
    		}
    		.item1 {
    		  background-color: #006699;
    		  width: 100px;
    		  height: 250px;
    		  float: left;
    		}
    		.item2 {
    		  background-color: #990000;
    		  width: 100px;
    		  height: 250px;
    		  float: right;
    		}
    		.item3 {
    		  background-color: #009900;
    		  width: 100px;
    		  height: 250px;
    		  float: right;
    		}
    		

＆＃13;

<div class="main">

  <div class="item1">

    <p>This is item 1 placeholder text</p>

  </div>
  <!-- Closes item 1 -->

  <div class="item2">

    <p>This is item 2 placeholder text</p>

  </div>
  <!-- Closes item 2 -->

  <div class="item3">

    <p>This is item 3 placeholder text</p>

  </div>
  <!-- Closes item 3 -->

</div>
<!-- Closes main -->

＆＃13;

＆＃13;

＆＃13;

Answer 1

Flexbox可以做到这一点。

.parent {
  width: 80%;
  margin: 1em auto;
  border: 1px solid grey;
  display: flex;
}
.child {
  height: 100px;
  width: 100px;
  border: 1px solid red;
  background: pink;
}
.child:first-child {
  margin-right: auto;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Answer 2

我会在另一个div中包装2和3，右浮动，宽度为200px。然后向左浮动item2，向右浮动item3。请参阅下面的CSS代码。

    .item2 {
        background-color: #990000;
        width: 100px;
        height: 250px;
        float: left;       
    }

    .item3 {
        background-color: #009900;
        width: 100px;
        height: 250px;
        float: right;               
    }

    #wrap { float:right; width:200px; }

Answer 3

<强>问题：

这里的问题是，当您将float:right;设置为.item2时，它将在.item3之前解析，并且会粘在右侧。

<强>解决方案：

最好的解决方案是将这两个项目div包装在另一个div中，给它们display:inline-block;并将float:right;赋予此包装div。

这是一个有效的演示：

.main {
  background-color: #cccccc;
  width: 100%;
  height: 250px;
}
.item1 {
  background-color: #006699;
  width: 100px;
  height: 250px;
  float: left;
}
.item2 {
  background-color: #990000;
  width: 100px;
  height: 250px;
  display:inline-block;
}
.item3 {
  background-color: #009900;
  width: 100px;
  height: 250px;
  display:inline-block;
}
.rightDiv {
  float: right;
}

<div class="main">

  <div class="item1">

    <p>This is item 1 placeholder text</p>

  </div>
  <!-- Closes item 1 -->
  <div class="rightDiv">
    <div class="item2">

      <p>This is item 2 placeholder text</p>

    </div>
    <!-- Closes item 2 -->

    <div class="item3">

      <p>This is item 3 placeholder text</p>

    </div>
    <!-- Closes item 3 -->
  </div>
</div>
<!-- Closes main -->