Question

我有这样的HTML和CSS。

    <div class="selected">
        <div class="text">First</div>
        <div class="arrow">&nbsp;</div>
    </div>

    .selected { width: 150px; }

    .selected .text { background: url(dropdown_text.png);  float: left; }
    .selected .arrow { background: url(dropdown_arrow.png); width:22px; float: right; }

我需要将“.text”放入150px - 22px的宽度。在两个浮子之间填充所有空的。我用jQuery制作它，但我认为它不是正确的方法。

        $('.selected .text').each(function(i, n) {
            var ctrlwidth = $(n).parents('.selected').width();
            var arrowidth = $(n).parent().find('.arrow').width();

            $(n).width(ctrlwidth - arrowidth);
        });

Answer 1

为什么只使用div来添加单独的背景箭头？

<div class="selected with-arrow">
  <div class="text"></div>
</div>

.with-arrow .text { background: url(dropdown_text.png); }
.with-arrow { background: url(dropdown_arrow.png); padding-left:22px; }

Answer 2

如果稍微修改html，则只能在css中轻松实现所需效果：

<div class="selected">
<div class="arrow">&nbsp;</div>
    <div class="text">First</div>
</div>

注意：箭头div内部有一个非中断空格（nbsp），但它没有被代码美化器显示。

现在您可以像这样应用css：

.selected { 
    width: 150px; 
}

.selected .text {}

.selected .arrow {
    float:right;
    width:22px;
}

Answer 3

从你正在做的事情来看，我认为你最好只使用一张桌子而不是div。

请注意，我假设您的文本项目将显示为垂直列表，然后您将对其进行编码。

<style>

#list
{
  width:150px;
  padding:0px; /*set this to what ever you want*/
}

td.arrowCol
{
  width:22px
}

td.arrowCol img
{
   float:right;
}

</style>

<table id="list" >
    <tr>
       <td id="copyCol" >
          first
       </td>
       <td id="arrowCol" >
          <img src="arrow.gif" />
       </td>
    </tr>
</table>

copyCol列的宽度将自动为150 - 22.如果您决定更改为200，则copyCol将缩放为200 - 22.

填充框的所有空白区域的浮动div

3 个答案: