CSS将容器缩小到两个动态宽度div的大小

Question

这就是我想要实现的目标

                            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   |   |
|    ------------------------------------------------------    |
 --------------------------------------------------------------

PICTURES(粗MSPAINT):小内容示例和大型内容示例

DIV INFO:最大192像素,但必要时应缩小.

DIV内容:缩小内容.如果内容很大,则width =容器中的剩余空间.

DIV TEXT:width = CONTENT的宽度+ INFO的宽度.

这是我到目前为止所拥有的.我不使用浮点数,因为我希望内容和信息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>

Answer 1

试试这个:http ://jsfiddle.net/JbuBC/2/ http://jsfiddle.net/JbuBC/14/

Answer 2

要使 #text 宽度等于 Content+Info 宽度，您需要再用一个 div 包裹 #content、#info、#text。