CONTAINER
 --------------------------------------------------------------
|                      CENTERED in CONTAINER                   |
|    -----------------------------------------   ----------    |
|   | Content Div                             | | Info Div |   |
|   | shrink to contents  OR                  | | shrink to|   |
|   | max size: (container width - info div ) | | contents |   |
|   |                                         |  ----------    |
|    -----------------------------------------                 |
|                                                              |
|    ------------------------------------------------------    |
|   |  text div: width = width of content div + info div   |   |
|    ------------------------------------------------------    |
 --------------------------------------------------------------

图片(原始MSPAINT)：small content example和large content example

DIV INFO：最大192像素,但必要时应收缩.

DIV内容：收缩到内容.如果内容大,则width =容器中的剩余空间.

DIV TEXT：width = INTENT宽度的宽度.

这是我到目前为止.我没有使用浮点数,因为我希望内容和信息div整体集中在页面上.

我遇到的问题是：

>文本div扩展为容器大小.
>如果浏览器窗口缩小,则信息div会碰到下一个
线.

CSS

#container {
    width: 80%;
    min-width: 760px;
    padding-top: 0;
    margin: 0 auto; 
}
#content {
    max-width: 71%; /* Kinda solves the problem of bumping info div
                       to next line,but leave awkward gaps */
    width: auto;
    vertical-align: top;
    display: inline-block;
}
#info {
    width: auto;
    vertical-align: top;
    text-align: left;
    display: inline-block;
}
#text {
    margin: 10px auto;
    width: auto;
    display: block;
    text-align: left;
}

HTML

<div id="container">
<div id="main">
    <div id="content"><img src="image.jpg" />Lorem ipsum ...</div>
    <div id="info">Lorem ipsum dolor</div>
    <div id="text">Lorem ipsum ...</div>
</div>
</div>