Question

我确定我的问题措辞非常糟糕，但这是我的问题：

我正在创建一长串地毯，每个地毯都有图片，标题，尺寸，原价和清仓价格。我已将每个地毯都放在自己的类中，并为其余的地毯重复这样做。这是班级目前的样子：

<div class="fLeft">
<img src="rug_index_package/rugs/O_5.jpg"/>
<p>Tabriz Wool and Silk</p>
<p>11.8m up to 20m</p>
<br>
<p>Original Price: $00.00</p>
<span>Clearance Price: $00.00</span>
    </div>

这个班级的CSS：

.fLeft{
  padding: 26px;
  float: left;
  line-height: 7px;

}
.fLeft img{
  width: 150px;
  height: 150px
}

如果您查看网站（Website），您会看到第二行看起来与其他行相比有点推出，这是因为标题为这排的第一块地毯是＆＃34;波斯大不里士羊毛和丝绸＆＃34;，这太长了，推了一排。显然它不会太长，但它仍然被推动。

我怎样才能解决这个问题？

Answer 1

您可能希望为.fleft div设置特定宽度。

例如width: 200px;

或者，因为您使用的是3列方法：width: 33%;

否则他们都会自动重新调整大小以适应内容......

一旦你设置了最大宽度，如果你想让文本溢出而不是换行到下一行，你可以在div上或在描述上使用overflow: visible;。

Answer 2

.fLeft {
    padding: 26px;
    float: left;
    line-height: 7px;
    width: 25%;
}

这是一个简单的解决方法：）

让P标签不推其他类

2 个答案: