大佬教程收集整理的这篇文章主要介绍了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 | | | ------------------------------------------------------ | --------------------------------------------------------------
图片(原始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>
以上是大佬教程为你收集整理的html – CSS缩小容器到两个动态宽度div的大小全部内容,希望文章能够帮你解决html – CSS缩小容器到两个动态宽度div的大小所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。