html – 使用CSS进行3列布局,左右可变大小,中间流体

概述我需要3列布局,第一列和第3列是可变的,因为会有图像或一些可变长度的文本(或另一个图像),但我需要中间用背景图像填充剩余空间,如果它会像我一样工作想象一下 HTML： <div class="left-vp"> <img src="~/Content/images/vp1.png" /></div><div class="mid-vp"></div><div class="righ 我需要3列布局,第一列和第3列是可变的,因为会有图像或一些可变长度的文本(或另一个图像),但我需要中间用背景图像填充剩余空间,如果它会像我一样工作想象一下

HTML：

<div >   <img src="~/Content/images/vp1.png" /></div><div ></div><div ><p>    //some text here or another img</p></div>

CSS

.left-vp {    float: left; } .mID-vp {    height: 2px;    background: #FFFFFF url("images/dot.png") repeat-x;    wIDth: 100%; } .right-vp {    float: right; }

CSS可以这样吗？

解决方法 如果您可以控制标记,并且不介意进行更改,则可以使用表块样式来完成此 *** 作.这是我知道哪种方式可以处理所有场景和调整大小的唯一方法.

HTML

<div >  <div>    <div >      <div >Column 1</div>    </div>    <div >      <div >Column 2</div>    </div>    <div >      <div >Column 3</div>    </div>  </div></div>

CSS

.container { wIDth: 100%; }.container { display: table; }.container > div { display: table-row; }.container > div > div { display: table-cell; }.container > div > div { padding: .5em; }.container .nowrap { white-space: nowrap; }.container .fill { wIDth: 100%; }.container .center { text-align: center; }.col1 { background: red; }.col2 { background: blue; }.col3 { background: green; }

在行动：http://jsfiddle.net/Vxc3n/1/

要记住以下几点：

>如果第一列和第三列包含文本,则需要将它们包装在具有空白区域的div中：无包装CSS样式>如果您有超过1个填充列,请确保宽度总计= 100％(例如,2列,使用50％)>您将无法将列缩小到超出所需的最小宽度

总结

以上是内存溢出为你收集整理的html – 使用CSS进行3列布局,左/右可变大小,中间流体全部内容，希望文章能够帮你解决html – 使用CSS进行3列布局,左/右可变大小,中间流体所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。