1

それで、私は自分の部署の連絡先ページを作成しています。写真を連絡先情報の横に小さく表示し、ホバーするとより見やすいサイズに拡大するというアイデアがありました。トランジションは問題なく設定できましたが、下にいる人が下ではなく拡大するにつれて、下の人が右に押し出されます。下の人を単純に押し倒した方が見栄えが良くなると思いますが、これまで試したcssトリックはどれもうまくいきませんでした。

これまでのところ、各連絡先をコンテナーの 100% を占める div にしてみました。また、「display:block;」も試しました。divがすでにブロックとして表示されていると確信していますが。このJsFiddleに css といくつかのサンプル div を入れました。それを機能させるために何か提案があれば教えてください。

コードは次のとおりです。

<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 に答える