Question

所以我正在为我的部门制作一个“联系我们”页面，我对它有一个想法，我们的图片会在我们的联系信息旁边小显示，但在悬停时会变得更容易看到。我把转换设置好了，但是当它扩展而不是向下时，它会将它下面的人推向右边。我认为如果下面的人被简单地推下来会更好看，但到目前为止我尝试过的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;
}

Answer 1

使用clear: left

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

jsfiddle

clear从您指定的位置基本上“清除”元素。无论何时处理float元素，它都很有用，因为它们通常会有点意外。

Css宽度转换以错误的方式推动事物

1 个答案: