浮动文字右侧的图像为一个侧杆

我来到这里，但我似乎无法看到文字Product 1 Title显示在右边，在图像旁边的顶部。其他文字seller需要出现在它下面。直到这一次，我尝试了所有的东西，从左边的图像移动到几乎所有其他东西，但是我得到的结果都是奇怪的。我也在这里尝试了几个关于stackoverflow的建议，但我怀疑它与其余的CSS（无法更改）有关。浮动文字右侧的图像为一个侧杆

我已经删除了与其相关的正文和css的其余部分，并且仅在此处发布了此问题。你能帮忙吗？

我已经发布了它对我而言的图像，以及我试图实现的结果。

Fiddle

这是有问题的一部分：

<div id="contentright"> 
      <div id="sidebar" class="clearfix"> 
       <div class="menu"> 
        <ul> 
         <li> 
          <img src="/resources/images/demo-1.jpg" style="float:left"><span style="margin-left:5px;">Product 1 Title</span><span>Seller</span> 
         </li> 

         <li> 
          <img src="/resources/images/demo-1.jpg" style="float:left"><span style="margin-left:5px;">Product 1 Title</span><span>Seller</span> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div>

Done this far Layout trying to achieve

来源

2014-10-05 Norman

我稍作剥离下来示例http://jsfiddle.net/TRNCFRMCN/3uzcbt58/3/％）p – loveNoHate 2014-10-05 11:07:45

.menu li { 
    border-top:1px solid #ebebeb; 
    list-style-type: none; 
    margin: 0; 
    display:inline-block; /* added */ 
    width:100%; /* added */ 
    padding: 5px; 
}

float:left;为.image是给人的问题，所以在底部<li>只是得到高度的文字h后，目前在<li>给予inline-block<li>将在这里得到充分的高度小提琴

Js Fiddle

来源

2014-10-05 10:52:49

.menu li { 
border-top:1px solid #ebebeb; 
list-style-type: none; 
margin: 0; 
padding: 5px; 
overflow: hidden;//added

}

因为 'IMG' DOM有浮动，但父DOM '礼'不干净，所以img dom免费的domlist。

来源

2014-10-05 11:02:20

一种简单的解决方案是增加clear: left到此类：

.menu li { 
    border-top:1px solid #ebebeb; 
    list-style-type: none; 
    margin: 0; 
    padding: 5px; 
    clear: left;/*Add clear left*/ 
}

fiddle

来源

2014-10-05 11:43:36

浮动文字右侧的图像为一个侧杆

回答

相关问题