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 回答