这是我的代码的样本:
<div ID="container-wrapper"> <div ID="container"> <div >This is left</div> <div ></div> </div></div>
假设#container-wrapper是固定宽度,例如960px. #container的宽度设置为100%.我不知道.left的宽度,因为里面的文字是动态的.它漂浮在左边. .line有一个背景图像,它本质上是一条重复填充div宽度的线.我想把它漂浮在.left旁边,所以它看起来像这样:
This is left ———————————————————
如果我将.line的宽度设置为100%,它将尝试填充整个容器宽度,所以问题是如何让它流畅地调整到.left遗留的空间.
希望我很清楚.
谢谢,
豪伊
这是我正在使用的真实代码的示例. .line确实是.insIDe-separator.
<div ID="container-wrapper"> <div ID="container"> <div >This is left</div> <div ><span > </span><span > </span></div> </div></div>.insIDe-separator{ background: transparent url('../images/insIDe_separator.png') no-repeat center center; margin: 0; padding: 0; height: 7px; wIDth: something?;}.insIDe-separator-left,.insIDe-separator-right{ display: block; position: absolute; wIDth: 8px; height: 7px; background: transparent url('../images/insIDe_plus.png') no-repeat 0px 0px;}.insIDe-separator-left{ float: left; left: 0;}.insIDe-separator-right{ float: right; right: 0;}解决方法 我不确定使用花车是否可行.但如果你可以使用display:table而不是浮动.left那么它就更容易了.
div#container { display:table; wIDth:100%; }div.left,div.line { display:table-cell; }总结
以上是内存溢出为你收集整理的HTML流体色谱柱全部内容,希望文章能够帮你解决HTML流体色谱柱所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)