Question

我正在尝试将图像推回到标题下方的左侧。仅将描述文本浮动到右侧。我似乎无法清除图像浮动。

HTML：

<div class="title">System Displays</div>
<div class="description">Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. 
 <img src="http://dummyimage.com/400x200/000/fff" /> 
 Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </div>

CSS：

.title {    
width: 200px;
float: left;
} 

.description{    
width: 200px;
float: right;
} 

.description img {
float: left;
clear: both; 
}

jsfiddle更清晰。我无法插入任何额外的HTML。谢谢你的任何建议。

编辑：这[[{3}}]是我在视觉上想要实现的目标。我不确定position: relative;是否合适。

Answer 1

您的jsfiddle与您的示例代码有很大不同。这是固定的jsfiddle demo。

.description img {    
    width: 200px;
    float: left;
}

如果您需要.description具有固定宽度，则需要另一种解决方案。你不能在它的容器盒外面漂浮一些东西。

以下是使用absolute定位的另一种方法的示例。

.description img {
position:absolute;
top:25px; 
left:0;
width:200px;
}

Demo

以下是使用relative定位的另一种方法：

.description img {
    width:200px;
    position:relative;
    left:-220px;
    float:left;
    margin-bottom:-100px;
}

Demo

浮动文本而不是图像

1 个答案: