如何调整浮动div为右上角

Question

所以我将使用Php并将值相加，所以我需要在所有其他div之后生成最后一个div。

有没有办法将最后一个div（Div＃4）与米色方框的右上角对齐？我的问题是我必须将它放在Div＃1的正下方或上方，以使它正确漂浮，但是我想把它放在Div＃3之后并且仍然让它漂浮在右边但漂浮在米色盒子的顶部。

基本上我要做的是将绿色框放在米色方框的右上方，但在Div＃3之后使用html代码。

<div style="width:100%;height:1000px; background-color: peachpuff">
  <div style="width:70%;height:140px;background-color: purple; float:left">
    <div>Div 1</div>
  </div>
  <div style="width:70%;height:140px;background-color: pink; float:left">
    <div>Div 2</div>
  </div>
  <div style="width:70%;height:140px;background-color: red; float:left">
    <div>Div 3</div>
  </div>
  <div style="width:20%;height:600px;background-color: green; float:right">
    <div>Div 4</div>
  </div>
</div>

Answer 1

这是一个奇怪的事情想要这样做。您可以这样做：

<div style="width:100%;height:1000px; background-color: peachpuff">
        <div style="width:70%;height:140px;background-color: purple; float:left"><!--  Div #1  -->
            <div>Div 1</div>
        </div>
        <div style="width:70%;height:140px;background-color: pink; float:left"><!--  Div #2  -->
            <div>Div 2</div>
        </div>
        <div style="width:70%;height:140px;background-color: red; float:left"><!--  Div #3  -->
            <div>Div 3</div>
        </div>
        <div style="width:20%;height:600px;background-color: green; margin-left: 10%;"> <!--  Div #4  -->
            <div>Div 4</div>
        </div>
    </div>

取消float: right。它会将左侧浮动块粘在右侧。然后将左侧块设置为70％宽度，右侧块设置为20％，因此70 - 20 = 10％停留。添加margin-left: 10%;并完成作业。

Answer 2

尝试从上一个double Tpointers[3]; Tpointers[0] = Padd; Tpointers[1] = Psub; Tpointers[2] = Pmult; Tpointers[3] = Pdiv; 删除float:right并使用div <{1}} margin-left

100%-width

或者，如果您允许更改某些标记，请尝试将<div style="width:100%;height:1000px; background-color: peachpuff"> <div style="width:70%;height:140px;background-color: purple; float:left"> <div>Div 1</div> </div> <div style="width:70%;height:140px;background-color: pink; float:left"> <div>Div 2</div> </div> <div style="width:70%;height:140px;background-color: red; float:left"> <div>Div 3</div> </div> <div style="width:20%;height:600px;background-color: green;margin-left:80%;"> <div>Div 4</div> </div> </div>和left框包装在不同的div中

right

Answer 3

    <div style="width:100%;height:1000px; background-color: peachpuff">
    <div style="width:70%;height:140px;background-color: purple; float:left"><!--  Div #1  -->
        <div>Div 1</div>
    </div>
    <div style="width:20%;height:420px;background-color: green;float: right"> <!--  Div #4  -->
        <div>Div 4</div>
    </div>
    <div style="width:70%;height:140px;background-color: pink; float:left"><!--  Div #2  -->
        <div>Div 2</div>
    </div>
    <div style="width:70%;height:140px;background-color: red; float:left"><!--  Div #3  -->
        <div>Div 3</div>
    </div>

</div>