0

最初のスパン テキストが長い場合、最初のスパン テキストが 2 番目にオーバーフローします。最初のスパン テキスト ID が長い場合、2 番目のスパンを下に移動するにはどうすればよいですか。

これが私のコードです

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

外側のクラス列の高さは固定されており、オート スケールではありません。ここで、文字列名が文字列 Developer にオーバーフローします。これを解決するにはどうすればよいですか?

ありがとう

4

2 に答える 2

1

css を使用して単語を分割し、自動的に単語を分割し、別のスパンにオーバーフローしないようにします。

.name{word-wrap:break-word;}
于 2013-08-03T07:33:43.710 に答える
0

2 番目のスパン get downwords に CSS を使用します。

.user_thumbnail {
  float: left;
}
.name {
  clear: both;
  float: left;
}
.job{
  clear: both;
  float: left;
}
于 2013-08-03T07:36:10.753 に答える