顶部和底部 div 之间的差距 - 如何摆脱它？

Question

如何让我的 "TextDiv" 位于 "TopDiv" 的正下方？两个 div 之间有一个奇怪的差距，有 CSS 原因吗？谢谢

[抱歉，不得不添加这个额外的评论，否则我的线程不会 post。]

Answer 1

您有三个独立的 div 都向左浮动。第三个被第二个的高度压低了

尝试将第一个和第三个放在一个 div 中，然后在其旁边浮动第二个。

<style>
   #leftWrap { float: left; }
   #topRight { float: left; }
</style>

<div id="leftWrap">
   <div id="topLeft"></div>
   <div id="textDiv"></div>
</div>
<div id="topRight"></div>

Answer 2

试试下面的方法css

.OuterBorder {
    border: 1px solid black;
    width: 120px;
    height: 140px;
    float: left;
}
.TopDiv {
    width: 80px;
    height:80px;
    border: 1px solid black;
    float: left;
}
#TextDiv {
    border: 1px solid black;
    width: 80px;
  position: absolute;
  top: 90px;
}
.TopRightDiv {
    float: left;
}
.Minibox {
    border: 1px solid black;
    width:20px;    
}
.MiniImg {
    width: 20px;
    height: 20px;
}

Answer 3

TopRightDiv 将 TextDiv 向下推的高度。使 TopRightDiv 右对齐并设置位置 margin-right.

.TopRightDiv {
    float: right;
    margin-right:16px;
}

.OuterBorder {
 border: 1px solid black;
 width: 120px;
 height: 140px;
 float: left;
}
.TopDiv {
 width: 80px;
 height:80px;
 border: 1px solid black;
 float: left;
}
#TextDiv {
 border: 1px solid black;
 width: 80px;
 float: left;
}
.TopRightDiv {
 float: right;
  margin-right:16px;
}
.Minibox {
 border: 1px solid black;
  width:20px;    
}
.MiniImg {
 width: 20px;
 height: 20px;
}

<div class="OuterBorder" data-menuid="Menu1">
 <a href="#"><img src="#" class="TopDiv"></a>
  
 <div class="TopRightDiv" id="Menu1">
  <a href="#"><div class="Minibox">
   <img src="#" class="MiniImg">
  </div></a>
  <a href="#"><div class="Minibox">
   <img src="#" class="MiniImg">
  </div></a>
  <a href="#"><div class="Minibox">
   <img src="#" class="MiniImg">
  </div></a>
  <a href="#"><div class="Minibox">
   <img src="#" class="MiniImg">
  </div></a>
 </div>
 
  <div id="TextDiv">Text</div>
</div>

Answer 4

试试这个：

.TopRightDiv {
    float: right;
    margin-right: 15px;
}

Answer 5

此代码可以提供帮助

.OuterBorder {
    border: 1px solid black;
    width: 120px;
    height: 140px;
    float: left;
    }
.TopDiv {
    width: 80px;
    height:80px;
    border: 1px solid black;
    float: left;
}
#TextDiv {
    border: 1px solid black;
    width: 80px;
    position: absolute;
    left: 80px;
}
.TopRightDiv {
    float: left;
}
.Minibox {
    border: 1px solid black;
    width:20px;    
}
.MiniImg {
    width: 20px;
    height: 20px;
}

顶部和底部 div 之间的差距 - 如何摆脱它？

Gap between top and bottom divs - how to get rid of it?

html

css

space