像表格一樣的定位元素，不使用表格標籤

我想在3列中放置一些東西。第一欄有一個圖標，第二欄有文字，第三欄有一個圖像。像表格一樣的定位元素，不使用表格標籤

我希望在不使用Table標記的情況下執行此操作。使用CSS我已經得到了第一個2列放置正確，這裏是圖像：

What I got so far...

在右邊，我需要添加其他圖像，而不會干擾左側的文本。

這是我的HTML代碼（精簡的基本知識）：

  <img src="Images/icon-1.png" /> 
      <span class="content-title">My title 1</span> 
      <p> 
      Here is my text ... 
      </p> 
      <br /> 


      <img src="Images/Icon-2.png" /> 
      <span class="content-title">My Title 2</span> 
      <p> 
      Here is my text ... 
      </p> 
      <br />

而且能夠模擬表佈局的CSS：

.content-title 
{ 
    font-size: 26px; 
    font-family: Helvetica,Arial,sans-serif; 
    color: #363636; 
    top: -28px; 
    position:relative; 
    left:+10px; 
    font-weight: bold; 
} 

#content-benefits p 
{ 
    margin-left:80px; 
    top:-30px; 
    position:relative; 
    width:325px; 
}

我的問題是，我不如何做到這一點，我必須（AFAIK）使用JavaScript來將圖像放在相對應的段落中。

來源

2011-06-17 Jeff

是否適合使用'float：right`？ – venimus 2011-06-17 11:23:53

你可以嘗試與浮動屬性在CSS或任何標籤定義風格，你可以把內容放在右側或左側像明智的浮動：right | float：left – Pratik 2011-06-17 11:24:12

如果想要另一個像它的「部分」的其餘部分之前添加到HTML，然後用右浮它：

 
img { 
    float: right; 
}

在另一方面，你爲什麼不使用標題標籤顯示你的標題？

來源

2011-06-17 11:22:07 Alex

你可以使用CSS display:table使其apear使用表格來看看該文檔爲這個發現here

來源

2011-06-17 11:22:49 AbstractChaos

放置冠軍後的圖像跨越結束標記

<img src="Images/icon-1.png" /> 
      <span class="content-title">My title 1</span> 
<img src="Images/icon-1.png" /> 
      <p> 
      Here is my text ... 
      </p> 
      <br />

來源

2011-06-17 11:25:42 niktrs

如果我正確瞭解你的佈局，我會做到這一點

<img style="float:left; width:80px" src="image/icon-1.png"/> 
<div style="width:405px"> 
    <img style="float:right; width:80px"/> 
    <div style="float:left; width:325px"> 
    <span/> 
    <p> 
    ... 
    </p> 
    </div> 
</div>

你不會需要其他的定位你使用

，如果你不能改變的標記，不是把width到span和p和float:left，並把float:right和width到img

把float元素自動轉換爲display:inline-block這意味着它不再分發到可用頁面寬度，但佔用最小的允許空間（由width設置）並保持矩形。這樣它就變成了一個列。

來源

2011-06-17 11:31:27 venimus

像表格一樣的定位元素，不使用表格標籤

回答

相關問題