0

チームページを作成しています。しかし、私のチームの詳細 div コンテナーは、利用可能なギャップに移動しません。これが私のjsfiddleです：http://jsfiddle.net/XxDFb/5/

HTML:

  <div class="team-wrapper">
<div class="team-member-photo">
    <img alt="pic" src="http://placehold.it/134x108">
</div>
    <div class="team-member-social-network-links"> 
        <a class="url" href="http://www.repeatpenguin.com" title="repeatpenguin.com" rel="me">Twitter</a> / <a class="url" href="http://www.repeatpenguin.com" title="repeatpenguin.com" rel="me">Facebook</a>
    </div>
    <div class="team-details">
        <p class="name">Firstname Surname</p>
        <p class="job-title">Job title</p>
        <p class="email">Email Address</p>
        <p class="tel">112-123-1232</p>
        <p class="desc">CONTENT BLOCK</p>
    </div>

CSS:

div.team-wrapper {
    background-color:#dedede;
    padding:10px;
}

div.team-member-photo{
    width:135px;
    height:109px;
}

div.team-member-social-network-links{
    width:135px;
    height:109px;    
}

div.team-details {
    border:1px solid red;
    width:300px;
    float:right;
}
4

2 に答える 2

2

これをcssに追加

div.team-details {
    top: 20px;
    left: 450px;
    position: absolute;
}

または良い効果を得るために、jsを使用することができます

$('div.team-details').css('left',parseInt($('.team-wrapper').width() - 340)+'px');
于 2013-08-04T14:18:26.500 に答える
2
  • overflow:hidden;あなたに追加div.team-wrapper
  • div.newDivを含む別のdivを追加div.team-member-photoし、div.team-member-social-network-links

  • のプロパティは.newDiv::

    .newDiv{
 overflow:hidden;
 width:auto;
 height:auto;
 float:left;
}

あなたの更新されたフィドル ::フィドル

于 2013-08-04T14:27:59.403 に答える