0

列の行の片側に画像を配置/浮動させ、反対側にテキストを浮動/中央に配置しようとしているコードに苦労しています。何が起こっているかというと、画像が右端まで浮いていません。また、テキストが右中央に配置されている場合、テキストは正しく配置されません。

画像を添付できないようです。私のウェブサイト「yukionna.com」に移動し、画像の名前をURLに追加すると、画像を表示できます：css_problem_01.jpg

これが私のコードです：

CSS:

.tn-container {
  height: 100px;
  background: #fff;
}
.tn-span {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  border-bottom:1px solid #ccc;  
} 
.tn-left img {
  float:left;
  width:110px;
  height:90px;
  margin:5px;
  text-align:right;
}
.tn-right img {
  float:right;
  width:110px;
  height:90px;
  margin:5px;
  text-align:left;
}

HTML:

<!-- row 1  -->     
<div class="tn-container tn-left">
    <div class="tn-span">
        <img src="..." alt="">
        Row 1 text
    </div>
</div>

<!-- row 2  --> 
<div class="tn-container tn-right">
    <div class="tn-span">
        <img src="..." alt="">
        Row 2 text
    </div>
</div>

<!-- row 3  --> 
<div class="tn-container tn-left">
    <div class="tn-span">
        <img src="..." alt="">
        Row 3 text
    </div>
</div>

<!-- row 4  --> 
<div class="tn-container tn-right">
    <div class="tn-span">
        <img src="..." alt="">
        Row 4 text
    </div>
</div
4

1 に答える 1

0

スタイルに追加width: 100%してみてください。.tn-spanこれにより、スパンが利用可能な幅全体を占めるように要求されます（したがって、画像が「適切に」右揃えになります）。この例を参照してください。

于 2013-11-13T17:11:57.077 に答える