html – 3个DIV的布局,其中2个在一列中

前端之家收集整理的这篇文章主要介绍了html – 3个DIV的布局,其中2个在一列中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想做这样的事情:
  1. |--------------------------------------------------------|-------------|
  2. | | |
  3. | DIV 1 | |
  4. | | DIV 3 |
  5. |--------------------------------------------------------| |
  6. | DIV 2 | |
  7. |--------------------------------------------------------|-------------|

我不能用这个表.而且我不知道是否有办法让他们像这样堆叠?

我尝试使用下面的代码,但DIV 3并不是最重要的.它实际上正好是div2.height从顶部降低.

  1. #DIV_1 {
  2. height: 125px;
  3. width: 80%;
  4. display: block;
  5. float: left;
  6. }
  7. #DIV_2 {
  8. width: 80%;
  9. height: 15px;
  10. display: block;
  11. }
  12. #DIV_3 {
  13. display: block;
  14. float: left;
  15. height: 140px;
  16. width: 20%;
  17. }
  1. <div class="row" style="width: 1024px; height: 140px;">
  2. <div>
  3. <div id="DIV_1"></div>
  4. <div id="DIV_2"></div>
  5. </div>
  6. <div id="DIV_3">
  7. </div>
  8. </div>

解决方法

试试这个.我从DIV_1和DIV_2中移除了浮点数和宽度并将其放在父级上.
  1. #DIV_0 {
  2. width: 80%;
  3. float: left;
  4. }
  5. #DIV_1 {
  6. height: 125px;
  7. }
  8.  
  9. #DIV_2 {
  10. height: 15px;
  11. }
  12.  
  13. #DIV_3 {
  14.  
  15. float: left;
  16. height: 140px;
  17. width: 20%;
  18.  
  19. }
  1. <div class="row" style="width: 1024px; height: 140px;">
  2.  
  3. <div id="DIV_0">
  4. <div id="DIV_1">div1</div>
  5. <div id="DIV_2">div2</div>
  6. </div>
  7.  
  8. <div id="DIV_3">
  9. div3
  10. </div>
  11.  
  12. </div>

猜你在找的HTML相关文章