How to create column width in CSS that expands with large images yet stays a default size for normally sized content?_问答_开发者

How to create column width in CSS that expands with large images yet stays a default size for normally sized content?

开发者 https://www.devze.com 2022-12-24 14:58 出处：网络

I am creating an HTML5 web page with a one column layout. Basically, it is a forum thread with individual posts.

相关专题：css fluid width

I am creating an HTML5 web page with a one column layout. Basically, it is a forum thread with individual posts.

I have specified in my CSS file the column to be 600px wide and centered it in the window using margin: 0 auto;. However, some images that are in the individual posts are larger than 600px and spill out of the column.

I'd like to widen an individual post to fit the larger images. However, I want all the other posts to still be 开发者_JS百科600px wide.

Right now, I'm just using overflow:auto which will create a scroll bar, but this is less than ideal. Is this possible to have the an individual post width grow for larger content yet stay fixed for normal content? Is this possible using just pure CSS?

Thanks in advance!

try using min-width: 600px instead of width, though it won't work in old versions of internet explorer.

You can use display:table on divs that contain your posts. You can see the effect with this example markup:

<html>
  <head>
    <style>
      .post{
        margin:0 auto;
        border:1px solid red;
        display:table;
      }
    </style>
  </head>
    <body style="width:100%;border:1px solid blue;">
      <div class="post" style="width:600px;">
        asd
      </div>
    <div class="post" style="width:900px;">
      asd
    </div>
    </body>
</html>

Of course this will not work IE under version 8.