css div宽度根据图像宽度

时间:2018-05-17 05:57:30

标签: javascript html css



<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>
&#13;
&#13;
&#13;

我希望33.33%的图片不是父div。我怎样才能做到这一点?图像宽度和高度是动态的。

2 个答案:

答案 0 :(得分:1)

尝试以下内容:

在div中使用img标签并将图像宽度赋予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>

答案 1 :(得分:1)

只有您可以在图像容器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>