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

图片（粗略MSPAINT）：small content example和large content example

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

将float:left;添加到#info和#content

从max-width: 71%;

中删除#content 如果你有一些HTML代码，那将是一个很好的帮助吗？

<强> Demo

Answer 3

要使#text width等于Content + Info宽度，您需要将#content，＃info，＃text与另外一个div包装起来。

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

CSS

HTML

3 个答案: