圖片和子彈點旁邊的彼此之間的列作爲div

Question

我一直在瀏覽和搜索一段時間，以找到一個圖片在一個列中的工作示例，並在另一個列表中的文本與子彈點。 這是迄今爲止我的結果。

正如你可以看到文本在頂部，因爲我希望它不會啓動。

<div style="overflow:hidden;position:relative;display:table"> 
<div style="display:table-cell;background:red"> 
    <img src="http://www.lyricsmode.com/i/bpictures/4795.jpg" /> 
</div> 
<div style="display:table-cell;width:100%;background:grey;"> 
    <p> 
     Here is some text about how awesome Spongebob squarepants is! 
    </p> 
    <ul> 
     <li>Home 
      <ul> 
       <li>Dashboard</li> 
      </ul> 
     </li> 
     <li>Views 
      <ul> 
       <li>Tickets</li> 
      </ul> 
     </li> 
     <li>Customers 
      <ul> 
       <li>List of Customers</li> 
      </ul> 
     </li> 
     <li>Conditional 
      <ul> 
       <li>Admin extension</li> 
      </ul> 
     </li> 
    </ul> 
</div> 

Link to example in Fiddle

Answer 1

試試這個

Fiddle Demo

<div style="overflow:hidden;position:relative;display:inline-flex"> 

只是更改顯示CSS內聯撓

Answer 2

試試這個..我認爲這是你在找什麼。

<div style="float:left; background:red"> 
    <img src="http://www.lyricsmode.com/i/bpictures/4795.jpg" /> 
</div> 
<div style="background:grey; float:left;"> 
<p> 
    Here is some text about how awesome Spongebob squarepants is! 
</p> 
<ul> 
    <li>Home 
     <ul> 
      <li>Dashboard</li> 
     </ul> 
    </li> 
    <li>Views 
     <ul> 
      <li>Tickets</li> 
     </ul> 
    </li> 
    <li>Customers 
     <ul> 
      <li>List of Customers</li> 
     </ul> 
    </li> 
    <li>Conditional 
     <ul> 
      <li>Admin extension</li> 
     </ul> 
    </li> 
</ul> 
</div> 

Answer 3

如果你想得到那個效果，你真的使用表格嗎？

嘗試在段這個網站：

<table > 
 
    <tr> 
 
    <td style="display:table-cell;background:red"> 
 
     <img src="http://www.lyricsmode.com/i/bpictures/4795.jpg" /> 
 
    </td> 
 
    <td style="display:table-cell;width:100%;background:grey;"> 
 
     <p> 
 
      Here is some text about how awesome Spongebob squarepants is! 
 
     </p> 
 
     <ul> 
 
      <li>Home 
 
       <ul> 
 
        <li>Dashboard</li> 
 
       </ul> 
 
      </li> 
 
      <li>Views 
 
       <ul> 
 
        <li>Tickets</li> 
 
       </ul> 
 
      </li> 
 
      <li>Customers 
 
       <ul> 
 
        <li>List of Customers</li> 
 
       </ul> 
 
      </li> 
 
      <li>Conditional 
 
       <ul> 
 
        <li>Admin extension</li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </td> 
 
    </tr> 
 
</table>

你得改變分別您divs到table和td並添加td項目（IMG和文本容器）到tr。

如果您對此解決方案有一些限制，請告訴我。

忠告：

不使用內聯樣式，您的標記變得非常混亂和很難使以後的任何變化。