Question

有时div中的内容会扩展为适合父宽度，但有时内容（如img，table）会使父级伸展。第一种或后一种情况会在什么条件下发生？

Answer 1

考虑HTML

     <div class='content'>
      <img src=" your img source "  /> 
     </div>

扩展div的内容以适合父宽度，此时指定内部内容宽度

a）

修正了高度和宽度

例如

       .content{
         width:500px;
         height:500px;
       }

       .content .img{
        width:100%;  // in this case the image will be stretched or compressed to fit the div exactly
        height:100%;
       }

注意：在上面的例子中，img的高度和宽度总是500px desipte它的分辨率

b）

固定宽度

例如

       .content{
         width:500px;
       }

       .content .img{
        width:100%;  // in this case the image will be stretched or compressed to fit the div exactly
       }

注意：

在上述情况下，我们没有固定.content或.content img的高度，因此高度或宽度将根据图像大小自动调整。因此，如果图像高度为400px，则.content div的高度为400px，如果图像高度为50px，则.content div的高度为50px

c）没有固定的宽度和高度

例如

   /* No style specified */

注意：

在上面的例子中，.content div的高度和宽度将具有宽度并且根据图像，因此如果图像具有500px * 900px的重新分配，则div的宽度和高度分别为500px和900px

在网页呈现期间，哪些子元素优先于父宽度计算

1 个答案: