Question

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

enter image description here

（RHS图片就是问题！）

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

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

在右边我有一些带有以下css的文字：

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

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

Answer 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中查看一个例子：here

Answer 2

 As per my understanding, the reason might be: 
There may be some float left given to the thumbnail image somewhere

为较低屏幕尺寸编写的样式内。最好的你能做的就是用萤火虫或其他东西检查并检查是否向浮动图像提供任何浮动。如果是这样，请删除它，或将其作为浮动为无。

如果您可以在调整屏幕大小时将整个文本放在图像下方，则可以使用清除：两者都用于较小的屏幕尺寸，必须给出文本div。

如果您可以提供审核链接，则可以轻松解决实际问题。希望我的解决方案有所谢谢： - ）

Answer 3

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

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

浮动帮助和混乱

3 个答案: