浮動文字右側的圖像爲一個側杆

我來到這裏，但我似乎無法看到文字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

浮動文字右側的圖像爲一個側杆

回答

相關問題