html - 浮助与迷茫

Question

我的问题很简单，但我真的很困惑。

(RHS pic 是问题所在!)

我有一个带有以下 CSS 的缩略图:

float: none;
margin-right: 0;
display: block;

在右侧我有一些带有以下 css 的文本:

position: relative;
text-decoration: none;
text-indent: 0;

---

现在效果很好!但是，当用户调整窗口大小时，文本会跳到我不想要的缩略图下方(我使用的是响应式网站)!我怎样才能防止这种情况发生呢？我一直在玩弄它很长时间，但无法解决这个问题:(。

Answer 1

您可以为您的图像和跨度文本添加左浮动属性，并为您的文本添加一个 margin left

.box {
    width: 210px; 
    vertical-align: text-top;
    display: table-cel
}
.box img {
    float: left;
    width: 100px; 
    height: 100px;
}
.box span.text {
    float: left;
    width: 100px;   
    box-sizing: border-box;
}

你能在jsfiddle中查看一个例子吗:here