第一個範圍文本溢出到第二個

當第一個範圍文本很長時，我的第一個範圍文本溢出到第二個範圍。如果第一個範圍文本ID很長，我可以如何向下移動第二個範圍。第一個範圍文本溢出到第二個

這裏是我的代碼

<div class="users-wrapper">  
<div class="column"> 
<a href="#" class="user_thumbnail"> 
    <img src="<?=base_url()?>/images/1.jpg" width="100px" height="100px"> 

</a> 
<span class="name">texttexttexttexttexttexttexttexttexttext</span> 
<span class="job">Developer</span> 
</div> 
</div> 

css: 

.users-wrapper { 
padding: 10px; 
min-height: 500px; 
width:auto; 
height: auto; 
-moz-box-shadow: 0 0 5px #888; 
-webkit-box-shadow: 0 0 5px#888; 
box-shadow: 0 0 5px #888; 
} 

.column { 
position: relative; 
min-height: 1px; 
padding-right: 15px; 
padding-left: 15px; 
margin-bottom: 23px; 
float: left; 
width: 33%; 
height: 110px; 
word-break: break-word; 
} 

.column .name { 
font-size:14px; 
font-weight:bold; 
line-height:20px; 
margin-left:128px; 
margin-top:-105px; 
padding-right:40px; 
position:absolute; 
color: #3366CC; 
word-wrap:break-word; 
} 

.column .job { 
font-size:13px; 
font-weight:normal; 
line-height:20px; 
margin-left:128px; 
margin-top:-87px; 
padding-right:40px; 
position:absolute; 
color: #808080; 
} 


.user_thumbnail, 
.img-user_thumbnail { 

height: 110px; 
padding: 4px; 
margin: 7px; 
width: 
line-height: 1.428571429; 
background-color: #ffffff; 
border: 1px solid #dddddd; 
border-radius: 4px; 
-webkit-transition: all 0.2s ease-in-out; 
     transition: all 0.2s ease-in-out; 
} 

.user_thumbnail { 
display: block; 
} 


.user_thumbnail > img, 
.img-user_thumbnail { 
display: inline-block; 
max-width: 100%; 
} 

a.user_thumbnail:hover, 
a.user_thumbnail:focus { 
border-color: #428bca; 
} 

.user_thumbnail > img { 
margin-right: auto; 
margin-left: auto; 
} 

.user_thumbnail .caption { 
padding: 9px; 
color: #333333; 
}

外部類柱的高度是固定的，不應該是汽車scale.Here字符串名稱溢出到字符串Developer.How我能解決這個問題？

感謝

來源

2013-08-03 VeNaToR

您可以使用float來不溢出，但是如果您想要將_job_向下移動，那麼不會增加div的高度麼？因爲它不再是一行的一部分，而是兩行 – rps

你能發佈你正在申請的CSS嗎？ –

我已經更新了CSS使用。請檢查。 – VeNaToR

使用CSS來打破這個詞所以它會自動分解單詞，不溢出到其他範圍。

.name{word-wrap:break-word;}

來源

2013-08-03 07:33:43

實際上這個單詞中斷正在工作，但名字溢出了工作，我怎麼能移動我的第二跨度..自動。 – VeNaToR

使用第二個跨度的CSS獲取下拉詞。

.user_thumbnail { 
    float: left; 
} 
.name { 
    clear: both; 
    float: left; 
} 
.job{ 
    clear: both; 
    float: left; 
}

來源

2013-08-03 07:36:10

第一個範圍文本溢出到第二個

回答

相關問題