div容器不會移入使用css的空隙

我正在創建一個團隊頁面。但我的團隊細節div容器根本不會進入可用的差距。這是我的jsfiddle：http://jsfiddle.net/XxDFb/5/div容器不會移入使用css的空隙

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

來源

2013-08-04 PriceCheaperton

它添加到CSS

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

或讓你可以使用JS

$('div.team-details').css('left',parseInt($('.team-wrapper').width() - 340)+'px');

來源

2013-08-04 14:18:26

添加overflow:hidden;在div.team-wrapper
再添DIV div.newDiv其中將包含良好的效果div.team-member-photo和div.team-member-social-network-links

的.newDiv屬性爲：：

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

更新後的FIDDLE :: FIDDLE

來源

2013-08-04 14:27:59

div容器不會移入使用css的空隙

回答

相關問題