以下圖片文字不顯示

僅供參考我是代碼小白，非常感謝您的幫助。所以我有一些很好的CSS給我等距圖像，但是當我嘗試在每個圖像下添加文本時，它不顯示。在括號中，我可以看到圖像下方的超級細線，但沒有文字。試圖調整文本和圖像div的CSS但沒有運氣。以下圖片文字不顯示

小提琴是在這裏：https://jsfiddle.net/datCodeTho/feosv4Lv/

這裏的HTML：

 <div id="container"> 
    <div><img src="http://www.craighuff.ca/img/STIRR_LOW-FI_RECORD_comp.jpg" id="wire1" alt="Stirr wireframe low-fi record screen"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit </p> 
    </div> 
    <div><img src="http://www.craighuff.ca/img/STIRR_LOW-FI_RECORD_comp.jpg" id="wire2" alt="Stirr wireframe low-fi record screen"></div> 
    <div><img src="http://www.craighuff.ca/img/STIRR_LOW-FI_RECORD_comp.jpg" id="wire3" alt="Stirr wireframe low-fi record screen"></div> 
</div> 
    <div id="belowImages"></div>

而這裏的CSS：

#container { 

    text-align: justify; 
    border: 10px solid black; 
    font-size: 0.1px; /* IE 9/10 don't like font-size: 0; */ 
} 
#container div { 
    width: 30%; 

    display: inline-block; 
    background: red; 
} 
#container:after { 
    content: ''; 
    width: 100%; /* Ensures there are at least 2 lines of text, so justification works */ 
    display: inline-block; 
} 
#wire1{ 
    display: block; 
    width: 100%; 
} 
#wire2{ 
     display: block; 
     width: 100%; 
} 
#wire3{ 
     display: block; 
     width: 100%; 
} 
#belowImages { 
    display: block; 
    height: 300px; 
    border: 10px solid black; 
    background: red; 
    font-size: 0.1px; /* IE 9/10 don't like font-size: 0; */ 
    min-width: 600px; 
}

來源

2016-07-11 datCodeTho

只要定義一個風格的P標籤：

#container p { 
    padding: 3px 5px; 
    color: white; 
    font-size:9px; 
}

來源

2016-07-11 19:45:12 Sascha

謝謝！然而，現在這個路線被拋出 - 我已經更新了小提琴以反映這一點。你知道我該如何解決這個問題嗎？ – datCodeTho

如果你想使用'display：inline-block;'你必須確保你所有的元素都有一個高度定義：'#container p {padding：3px 5px; 顏色：白色; font-size：9px; height：50px; 溢出：auto; }'溢出：自動只是爲所有溢出的內容添加一個scollbar。（只是可選） – Sascha

謝謝。這並不解決對齊問題，但使#container p顯示：flex;確實。 – datCodeTho

以下圖片文字不顯示

回答

相關問題