Question

大家好（和女孩），

这是我现在正在使用的结构。

＆＃13;

<div class="payment-option clearfix">
  <span class="custom-radio pull-xs-left">...</span>
    <label style="display:inline;width:100%">
      <span style="float:left;">Pay by CashonDelivery</span>
      <img style="float:right;" src="http://placehold.it/50x20">
    </label>
</div>

＆＃13;

标签已将其宽度设置为100％，以便填充除自定义无线电元素之外的右侧剩余空间。这很好用。但是，是否有可能使跨度跨越整个宽度减去图像的宽度？考虑具有可变宽度的图像。

我想用它实现什么？即使用户点击文本和图片之间的空白区域，我也希望收音机可以选择。有人可以帮我吗？

Answer 1

您可以使用css的函数calc

例如，如果您的图片width:50px;

您的范围将包含width:calc(100% - 50px);

如果图像的宽度未知，则可以使用弹性框

html代码会变成这样：

<div id="payment-option-3-container" class="payment-option clearfix">
    <span class="custom-radio pull-xs-left">...</span>
    <label style="width:100%">
      <span style="background:red;display:inline-block;">Pay by CashonDelivery</span>
      <img style="" src="http://placehold.it/50x20">
    </label>
</div>

和CSS：

div,label {

    display: -webkit-flex;
    display: flex
}
label,label span{

    -webkit-flex-grow:1;
    flex-grow:1;
}

Working demo

Answer 2

我不确定你所要求的解决方案是否可能与你要求的解决方案有关，但也许这可行。它将标签更改为一个位置：relative，从而使所有“绝对”子项相对于父项。

我已经为JSFiddle添加了边框，以可视化元素的位置。如果对原始示例代码执行相同的操作，您会注意到蓝色边框只是一个小条带，实际上并不像您期望的那样包含这两个元素。

原始示例代码（带边框）：https://jsfiddle.net/af6jfx84/

固定具有相对/绝对定位的代码：https://jsfiddle.net/qj721jyf/

<div class="payment-option clearfix">
  <span class="custom-radio pull-xs-left">...</span>
    <label style="display:block;width:100%;">
      <span style="position:absolute;top:0;left:0;">
        <input type="checkbox" />
        Pay by CashonDelivery
      </span>
      <img style="position:absolute;top:0;right:0;" src="http://placehold.it/50x20">
    </label>
</div>

除图像外，还填充带有跨度的空间

2 个答案: