Question

这是JS Fiddle的完整代码

.ads-container
{
 width: 274px;
 height: 913px;
 margin-top:  55px;
}

这是我的容器

它应该像这样http://imgur.com/nRJpbPA

我尝试使用float并对齐，但它不起作用，请帮助我。

谢谢！

Answer 1

您必须绝对定位文本并为其指定宽度，如http://jsfiddle.net/0ad96zyr/2/

.ads-prod-text{
left:130px;  
width:120px;
position:absolute;
}

Answer 2

在ads-prod-text课程上加上宽度。

http://jsfiddle.net/Delorian/5mf170fb/

.ads-prod-text {
    float: left;
    width: 177px;
}

Answer 3

您只需要从float: left移除.ads-prod-text，然后稍微使用margin和padding。无需定位：

FIDDLE

<强> CSS

.ads-container{
   width: 274px;
   height: 913px;
   margin-top:  55px;
}

.ads-ul{
    list-style-type: none;  
}

.ads-li{
    width: 274px;
    height: 185px;
    background-color: #f7f7f7;
    padding: 8px; //add padding to container for spacing      
}

.ads-prod-title{
   text-align: left;
   display: inline-block; //add so it doesnt take full width
}

.ads-prod-icons{
    padding: 0px;
    margin: 0px;
    float:right;
}

.ads-prod-img{
   float: left;
   margin: 20px 0 0 0; //add for spacing        
}

.ads-prod-text{
  /*float: left;*/ //remove
   margin: 40px 0 0; //add for spacing        
}

Answer 4

ads-prod-text
{

     width : 170px;  /* new added, but depend on width on container  */
     float: left;

}

http://jsfiddle.net/0ad96zyr/5/已更新：）

如何在容器内的文本旁边对齐图像？

4 个答案: