html 缩小两个div间距,html – CSS缩小容器到两个动态宽度div的大小

这是我正在努力实现的

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

| ------------------------------------------------------ |

--------------------------------------------------------------

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

Lorem ipsum ...

Lorem ipsum dolor

Lorem ipsum ...