How to Make a Wrapper Div Fluidly Match the Width of a Child Image?

How to Ensure a Wrapper Div Adapts to the Width of a Child Image

Problem: How do you configure a wrapper div to take on the maximum width of a child image while ensuring the div's width remains fluid?

Solution:

One unconventional approach is to set the wrapper div's display property to "table" and its width to "1%." By doing this, the image exceeds the wrapper's width constraint and asserts its own size on the wrapper.

.wrapper {
  border: 1px solid red;
  display: table;
  width: 1%;
}

<div class="wrapper">
  <img src="http://www.fillmurray.com/284/196">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare dictum ligula quis dictum. Nam dictum, eros sit amet imperdiet aliquet, ligula nisl blandit lectus, quis malesuada nunc ipsum ac magna. Vestibulum in magna eu sem suscipit molestie.
    Maecenas a ligula molestie, volutpat turpis et, venenatis massa. Nam aliquam auctor lectus ac lacinia. Nam consequat lacus porta odio hendrerit mollis. Etiam at congue est, eu fermentum erat. Praesent vestibulum malesuada ante. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

This workaround allows the div to mold itself to the image's width dynamically, even though the div's width is not explicitly set.

The above is the detailed content of How to Make a Wrapper Div Fluidly Match the Width of a Child Image?. For more information, please follow other related articles on the PHP Chinese website!