0

我的问题很简单，但我真的很难过。

在此处输入图像描述

（RHS图片是问题！）

我有一个带有以下 css 的缩略图：

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

在右侧，我有一些带有以下 CSS 的文本：

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

现在这很好用！但是，当用户调整窗口大小时，文本会跳到我不想要的缩略图下方（我使用的是响应式网站）！我怎样才能防止这种情况发生这种行为的文本？我已经玩了很长时间了，但无法解决这个问题:(。

4

3 回答 3

1

您可以将左浮动属性添加到图像和跨文本，并添加到文本的左侧边距

.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 中查看一个例子吗：这里

于 2013-08-09T05:55:00.573 回答
0 
 As per my understanding, the reason might be: 
There may be some float left given to the thumbnail image somewhere

在为较低屏幕尺寸编写的样式内。您可以做的最好的事情是，使用萤火虫或其他东西进行检查，并检查缩略图是否有任何剩余的浮动。如果是这样，请将其删除，或将其作为浮动作为无。

如果您可以在调整屏幕大小时将整个文本放在图像下方，则可以使用 clear: both 来获得较小的屏幕尺寸，必须给定文本 div。

如果您可以提供评论链接，那么解决真正的问题将很容易。希望我的解决方案有所帮助。谢谢 ：-）

于 2013-08-09T04:17:10.693 回答
0

这似乎可以满足您的要求：

<html>
    <head>     
        <style> 
        img {
            float: left;
            width: 40px;
            height: 40px;
            border: 1px solid gold;
            margin-left: 5px;
        }
        .text {
            margin-left: 50px;
        }
        .container {
            width: 150px;
            border-left: 3px solid red;
        }
        </style>
    </head>
    <body>
        <div class="container">
        <img>
        <div class="text">This should stay aligned and not go under the thumbnail.</div>
        </div>
    </body>
</html>
于 2013-08-09T05:27:25.203 回答