Question

我尝试在我的在线应用程序中创建复杂的控件。控件有两个列表框和两个按钮之间。列表框的宽度（listbox-target，listbox-source）必须相等。控制按钮的宽度可以固定。所有控制的高度也必须相等。下面是HTML和JS代码。

我尝试用css做这个，但不能。我写了javascript来计算每个元素的宽度和高度。

Width of listbox-target = listbox-source = ('fullwidth of attributeref-two-listboxes' - 'width of control-buttons') / 2.

它运行良好，但每次都必须从resize事件调用。有时resize事件不会触发，控件宽度也不会改变。

我认为，最重要的是只用css制作这个，但是怎么样？！请帮助！

function resizeAttributerefTwoListboxes() {
var is_ff = navigator.userAgent.toLowerCase().indexOf('firefox') > -1,
    is_ie = navigator.userAgent.toLowerCase().indexOf('MSIE') > -1 || /Trident.*rv[ :]*(\d+\.\d+)/.test(navigator.userAgent);
$("div.attributeref-two-listboxes div").removeAttr("style");
$("div.attributeref-two-listboxes").each(function(){
    var that = $(this),
        target = that.find(".listbox-target"),
        source = that.find(".listbox-source"),
        control = that.find(".control-buttons");
    if (this.offsetWidth < 420) {
        control.find('a[method="add"] > i').addClass("fa-angle-up").removeClass("fa-angle-left");
        control.find('a[method="remove"] > i').addClass("fa-angle-down").removeClass("fa-angle-right");
        target.css({"width":"100%"});
        control.css({"width":"100%"});
        control.children().css({"display":"inline-block"});
        source.css({"width":"100%"});
    } else {    //horizontal alignment
        control.find('a[method="add"] > i').addClass("fa-angle-left").removeClass("fa-angle-up");
        control.find('a[method="remove"] > i').addClass("fa-angle-right").removeClass("fa-angle-down");
        var w = Math.ceil((this.offsetWidth - control[0].offsetWidth - (is_ff || is_ie ? 2 : 1))/2);
        target.css({"width":w+"px"});
        source.css({"width":w+"px"});
        control.children().css({"height":(target[0].offsetHeight-20)+"px"}); //20 - paddings from top and bottom (10+10)
        control.css({"height":target[0].offsetHeight+"px"});
    }
});
}

<div class="attributeref-two-listboxes">
<div class="listbox-target" style="width: 549px;">
    <select id="Objectint_chg_management_change_user" acode="chg_management_change_user" atype="8" astyle="3" aislist="0" class="form-control tooltipstered" multiple="multiple" style="max-width: 750px;" size="4" name="Objectint[chg_management_change_user][]"></select>
</div>
<div class="control-buttons" style="height: 90px;">
    <div style="height: 70px;">
        <a class="btn btn-primary option mover" target="Objectint_chg_management_change_user" source="Objectint_chg_management_change_user_select" method="add" href="#">
            <i class="fa fa-angle-left"></i>
        </a>
        <a class="btn btn-primary option mover" target="Objectint_chg_management_change_user" source="Objectint_chg_management_change_user_select" method="remove" href="#">
            <i class="fa fa-angle-right"></i>
        </a>
    </div>
</div>
<div class="listbox-source" style="width: 549px;">
    <select id="Objectint_chg_management_change_user_select" acode="chg_management_change_user" atype="8" astyle="3" aislist="0" class="form-control" multiple="multiple" style="max-width: 750px;" size="4" name="[]">
        <option value="68">User 1</option>
        <option value="61">User 2</option>
        <option value="76">User 3</option>
    </select>
</div>

this is my control after right resize

this is my control after wrong resize

Answer 1

使用float: left和min-width。

min-width至少应该是元素的宽度。如果该部分可以跨越页面的整个宽度，使用960px并不是一个坏主意，因为它在大多数外形尺寸（平板电脑，智能手机，PC，占1080p显示器的1/2）中都能很好地显示。

通过这种方式，您还可以避免使用旧版浏览器不支持的display: inline-block（尽管该窗口不断向前滑动，因此除了企业Web应用程序等以外，这几天都不是问题）。

.attributeref-two-listboxes {
  min-width: 960px;
  overflow: hidden;
  font-size: 0;
}
.chooser
{
  float: left;
  width: 300px;
  height: 100px;
  font-size: 14px;
  }
.buttons
{
  float: left;  
  }
.buttons input
{
  width: 30px;
  height: 30px;
  background-color: rgb(34,131,203);
  color: #fff;
  border: 1px solid #333;
  display: block;
  margin: 13px 16px;
  font-size: 16px;
  }

<div class="attributeref-two-listboxes">
<select multiple size=4 class='chooser'>
  <option>Uno</option>
  <option>Dos</option>
  <option>Tres</option>
</select>
<div class='buttons'>
  <input type='button' value='&lt;' />
  <input type='button' value='&gt;' />
</div>
<select multiple size=4 class='chooser'>
  <option>Uno</option>
  <option>Dos</option>
  <option>Tres</option>
</select>
</div>

Answer 2

Flex-box允许在某些情况下避免使用JS。

Link to jsfiddle 。

@media screen and (max-width: 500px) {
    .flex_container {
        flex-direction: column;
        flex-basis: 100%;
    }
.arrays_v {display : none}
.arrays_h {display : inline}    
}

我想我的解决方案对你有用。

两个在一个容器div中具有相等宽度的列表框

2 个答案: