HTML流体色谱柱

概述让我先说一下我觉得自己像个白痴.我有一个相当简单的场景,我无法弄清楚. 这是我的代码的样本： <div id="container-wrapper"> <div id="container"> <div class="left">This is LEFT</div> <div class="line"></div> </div></div> 假设#container- 让我先说一下我觉得自己像个白痴.我有一个相当简单的场景,我无法弄清楚.

这是我的代码的样本：

<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 >&nbsp;</span><span >&nbsp;</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流体色谱柱所遇到的程序开发问题。

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