Question

如何让“TextDiv”坐在“TopDiv”的正下方？两个div之间有一个奇怪的差距，有没有CSS原因为什么会这样？谢谢

[抱歉，不得不添加这个额外的评论或我的帖子不会发布。]

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;
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 4

试试这个：

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

Answer 5

此代码可以提供帮助

$('.tile')
    // tile mouse actions
    .on('mouseover', function(){
      $(this).children('.photo').css({'transform': 'scale('+ $(this).attr('data-scale') +')'});
    })
    .on('mouseout', function(){
      $(this).children('.photo').css({'transform': 'scale(1)'});
    })
    .on('mousemove', function(e){
      $(this).children('.photo').css({'transform-origin': ((e.pageX - $(this).offset().left) / $(this).width()) * 100 + '% ' + ((e.pageY - $(this).offset().top) / $(this).height()) * 100 +'%'});
    })
    // tiles set up
    .each(function(){
      $(this)
        // add a photo container
        .append('<div class="photo"></div>')
        // some text just to show zoom level on current item in this example
        .append('<div class="txt"><div class="x">'+ $(this).attr('data-scale') +'x</div>ZOOM ON<br>HOVER</div>')
        // set up a background image for each tile based on data-image attribute
        .children('.photo').css({'background-image': 'url('+ $(this).attr('data-image') +')'});
    })

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

5 个答案: