html – CSS缩小容器到两个动态宽度div的大小
发布时间:2020-12-14 18:47:52 所属栏目:资源 来源:网络整理
导读:这是我正在努力实现的 CONTAINER --------------------------------------------------------------| CENTERED in CONTAINER || ----------------------------------------- ---------- || | Content Div | | Info Div | || | shrink to contents OR | | shr
这是我正在努力实现的
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扩展为容器大小. 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> 解决方法
尝试这样:
http://jsfiddle.net/JbuBC/2/
http://jsfiddle.net/JbuBC/14/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |