1

所以我正在为我的部门制作一个联系我们页面，我有一个想法，我们的图片将在我们的联系信息旁边显示得很小，但在悬停时会增长到更容易查看的大小。我的过渡设置没问题，但是当它扩展而不是向下时，它会将其下方的人推向右侧。我认为如果下面的人被简单地推倒会更好看，但是到目前为止我尝试过的所有 css 技巧都没有奏效。

到目前为止，我已经尝试让每个联系人成为占据 100% 容器的 div，我也尝试过“display:block;” 即使我很确定 div 已经显示为块。我已将 css 和一些示例 div 放在此JsFiddle中。如果您对我可以做些什么来使它工作有任何建议，请告诉我。

这是代码：

<div class="contact2">
<h3>Name Here</h3>
<img src="http://openclipart.org/people/naught101/ProfilePlaceholderSuit.svg" alt="" />
<div>
<strong>Title: </strong>Area IT Director <br /> 
<strong>Phone: </strong>555-5555  <br /> 
<strong>Email: </strong><a href="mailto:dummy.address@sharklasers.com">dummy.address@sharklasers.com</a></div>
</div>
<div class="contact2">
<h3>Name Here</h3>
<img src="http://openclipart.org/people/naught101/ProfilePlaceholderSuit.svg" alt="" />
<div>
<strong>Title: </strong>Technician III <br /> 
<strong>Ext: </strong>555-5555 <br /> 
<strong>Email: </strong><a href="mailto:dummy.address@sharklasers.com">dummy.address@sharklasers.com</a></div>
</div>


.contact2{
margin-left: 30px;  
width: 100%;
display: block;
}

.contact2 strong{
color: #4d7123;
}

.contact2 img{
height: 50px;
float: left;
margin-right: 20px;
-moz-transition: height 1s;
-webkit-transition: height 1s;
-o-transition: height 1s;
transition: height 1s;

}

.contact2 img:hover{
height:100px;
}
4

1 回答 1

1

利用clear: left

.contact2{
    clear: left;
    margin-left: 30px;  
    width: 100%;
    display: block;
}

jsfiddle

clear基本上从您指定的位置“清除”元素。每当您处理float元素时，它都会很有用，因为它们通常会表现得有些出乎意料。

于 2013-07-25T20:29:32.997 回答