文字下面的圖像用網格做的網格

Question

我用div做了網格，裏面有圖像。現在我想以某種方式直接在圖像下面獲取文本。我不知道該怎麼做。這是我的代碼：

<div id="grid"> 
    <div id="gridtop1"> 
    <img src="img/img.jpeg" /> 
    <p>Text here</p> 
    </div> 
    <div id="gridtop2"> 
    <img src="img/img.jpeg" /> 
    <p>Text here</p> 
    </div> 
    <div id="gridtop3"> 
    <img src="img/img.jpeg" /> 
    <p>Text here</p> 
    </div> 
    <div id="gridbottom1"> 
    <img src="img/img.jpeg" /> 
    <p>Text here</p> 
    </div> 
    <div id="gridbottom2"> 
    <img src="img/img.jpeg" /> 
    <p>Text here</p> 
    </div> 
    <div id="gridbottom3"> 
    <img src="img/img.jpeg" /> 
    <p>Text here</p> 
    </div> 
</div> 

和CSS：

#grid { 
     position: relative; 
     left: 10%; 
     width: 80%; 
     height: 600; 
     background-color: yellow; 
} 
#gridtop1 { 
      position: absolute; 
      left: 10%; 
      top: 5%; 
} 
#gridtop2 { 
      position: absolute; 
      left: 40%; 
      top: 5%; 
} 
#gridtop3 { 
      position: absolute; 
      right: 10%; 
      top: 5%; 
} 
#gridbottom1 { 
      position: absolute; 
      top: 55%; 
      left: 10%; 
} 
#gridbottom2 { 
      position: absolute; 
      top: 55%; 
      left: 40%; 
} 
#gridbottom3 { 
      position: absolute; 
      top: 55%; 
      right: 10%; 
} 

現在，我想這：

#grid p { 
    text-align: justify; 
    width: [width of img]; 
} 

但它並沒有幫助。 我不想爲所有p標籤生成不同的id。我非常接近放棄和使用表。但是很高興讓這個工作。文字在圖像下方，但是從中間開始並一路走向下一幅圖像。請有人幫我花了3個小時試圖解決它。

Answer 1

我不認爲你必須在CSS上出汗太多。

請檢查這個小提琴，讓我知道這是否解決您的問題 -

您可以通過簡單的CSS實現它（使用float和position）

** Fiddle

Answer 2

您可以使用HTML5標記爲<figure>和<figcaption>（而不是div & p），並將<figure>顯示爲行內框。

DEMO（見圖像標題下面設置或在圖像的底部將鼠標懸停）

<figure> 
    <img src="http://dummyimage.com/120x150&text=img-2" /> 
    <figcaption> 
     <p>Caption image</p> 
    </figcaption> 
    </figure> 

基本CSS：

figure { 
    margin:2px; 
    display:inline-block; 
    vertical-align:top; 
} 

居中它們，上figure父容器使用text-align:center 。讓他們在右邊或左邊，使用text-align:right或left;。

figcaption中的文字，將使用width的圖片作爲參考，寬度爲figure。

如果您將figcaption設置爲絕對位置，則不必介意它們的寬度。