三个DIV，两个是紧密的，一个是左移的

Question

有一个结构：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="carttable">
</div>

<table class="cartfacts" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr class="ordersum"><td class="cost costwide">Summa&nbsp;exkl.&nbsp;moms:</td></tr>
<tr class="ordervat"><td class="cost costwide">Moms:</td></tr>
<tr class="ordersumtotal"><td class="cost costwide">Att&nbsp;betala:</td></tr>

</tbody></table>

如何让div3向左浮动到div2，然后在div2上左转？

Answer 1

试试这个：

＆＃13;

＆＃13;

#div1 {
  float: left;
  width: 200px;
  height: 30px;
  border: 5px solid #ccc;
  margin: 5px;
  padding: 2px;
  text-align: center;
}
#div2 {
  float: right;
  width: 80px;
  text-align: center;
  border: 5px solid #000;
}
#div3 {
  float: left;
  width: 200px;
  height: 30px;
  border: 5px solid red;
  margin: 5px;
  padding: 2px;
  text-align: center;
}

＆＃13;

<div id="div1">
  div 1
  <div id="div2">div 2</div>
</div>
<div id="div3">div 3</div>

＆＃13;

＆＃13;

＆＃13;

这是jsfiddle：https://jsfiddle.net/nmsptskp/

Answer 2

在所有3个div＆amp;上使用display:inline-block div2上的float:right

＆＃13;

＆＃13;

#div1 {
  border: 1px solid #f00;
  height: 20px;
  width: 100px;
  display:inline-block;
}
#div2 {
  float: right;
  border: 1px solid #0f0;
  height: 20px;
  width: 50px;
  display:inline-block;
}
#div3 {
  border: 1px solid #00f;
  height: 20px;
  width: 50px;
  display:inline-block;
}

＆＃13;

<div id="div1">
   <div id="div2"></div>
</div>
<div id="div3"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我的回答是使用flexbox css

＆＃13;

＆＃13;

.container{
  display: flex;
}

#div1{
  flex-grow: 1;
  border:5px solid #ccc;
  text-align:center;
  display: flex;
  justify-content: space-between;
  flex-direction: col;
}
#div2{
  width: 50%;
  text-align:center;
  border:5px solid #000;
  self-
}
#div3{
  flex-grow: 1;
  border:5px solid red;
  text-align:center;
}

＆＃13;

<div class="container">
  <div id="div1">
    div 1
     <div id="div2"> div 2</div>
  </div>
  <div id="div3"> div 3</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

左右浮动

＆＃13;

＆＃13;

<style>
	#div1{width:300px;height:50px;background:green;margin:10px;float:left;}
	#div2{width:100px;height:50px;background:red;float:right;opacity:0.7}
	#div3{width:100px;height:50px;background:yellow;margin:10px;float:left;}
</style>
<div id="div1">
   <div id="div2"></div>
</div>
<div id="div3"></div>

＆＃13;

＆＃13;

＆＃13;