以下图片文字不显示

仅供参考我是代码小白，非常感谢您的帮助。所以我有一些很好的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

以下图片文字不显示

回答

相关问题