css div宽度根据图像宽度

Question

 <div style="position: relative"> <img src="http://52.66.90.164/Show_barcode"> <div stule="position: absolute;top:100%;"> <p style="float:left;width: 33.33%">Hello world my name is Rushabh Shah.</p> <p style="float:left;width: 33.33%">Hello world my name is Rushabh Shah.</p> <p style="float:left;width: 33.33%">Hello world my name is Rushabh Shah.</p> </div> </div> 

我希望图像的33.33％不是父div。 我该如何实现？ 图像的宽度和高度是动态的。

Answer 1

尝试以下操作：

将img标签放入div中，并将图像宽度设置为div

 <div style="position: relative"> <div style="position: absolute;top:100%;width:285px"> <img src="http://52.66.90.164/Show_barcode" style="display:block"> <p style="float:left;width: 33.33%">Hello world my name is Rushabh Shah.</p> <p style="float:left;width: 33.33%">Hello world my name is Rushabh Shah.</p> <p style="float:left;width: 33.33%">Hello world my name is Rushabh Shah.</p> </div> </div> 

Answer 2

仅当您可以设置float: left;时才可能float: left; 在图像容器div ，如下所示：

 <div style="position:relative; float:left;"> <img src="http://via.placeholder.com/650x150"> <div style="position:absolute; width:100%; left:0; top:100%;"> <p style="float:left;width: 33.33%">Hello world my name is Rushabh Shah.</p> <p style="float:left;width: 33.33%">Hello world my name is Rushabh Shah.</p> <p style="float:left;width: 33.33%">Hello world my name is Rushabh Shah.</p> </div> </div>