Javascript 一个容器div中两个宽度相等的列表框

我尝试在我的在线应用程序中创建复杂的控件。控件之间有两个列表框和两个按钮。列表框（列表框目标、列表框源）的宽度必须相等。控制按钮的宽度可以固定。所有控件的高度也必须相等<代码>HTML和

JS

下面的代码

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

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

它工作得很好，但每次都必须从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>

函数resizeAttributeReftwolistBox（）{
var是_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-listboxs div”）.removeAttr（“style”）；
$（“div.attributeref-two-listboxs”）。每个（函数（）{
var that=$（此），
target=that.find（“.listbox target”），
source=that.find（“.listbox source”），
control=that.find（“.control buttons”）；
如果（此偏移网络宽度小于420）{
control.find（'a[method=“add”]>i'）.addClass（“fa角度向上”）.removeClass（“fa角度向左”）；
control.find（'a[method=“remove”]>i'）.addClass（“fa角度向下”）.removeClass（“fa角度向右”）；
css（{“宽度”：“100%”）；
css（{“宽度”：“100%”）；
css（{“display”：“inline block”}）；
css（{“宽度”：“100%”）；
}else{//水平对齐
control.find（'a[method=“add”]>i'）.addClass（“左前角”）.removeClass（“上前角”）；
control.find（'a[method=“remove”]>i'）.addClass（“fa角度右”）.removeClass（“fa角度下”）；
var w=Math.ceil（（this.offsetWidth-control[0].offsetWidth-（is|ff|is|ie？2:1））/2）；
css（{“width”：w+“px”}）；
css（{“宽度”：w+“px”}）；
control.children（）.css（{“height”：（目标[0].offsetHeight-20）+“px”}）；//20-从顶部和底部填充（10+10）
css（{“height”：目标[0].offsetHeight+“px”}）；
}
});
}
用户1
用户2
用户3

---

使用

浮动：左

和

最小宽度

min width

至少应为元素的宽度。如果该部分可以覆盖页面的整个宽度，那么使用

960px

不是一个坏主意，因为它在大多数形状因素（平板电脑、智能手机、个人电脑，占据1080p显示器的1/2）中都能很好地显示

通过这种方式，您还可以避免使用较旧的浏览器不支持的

display:inline block

（尽管该窗口一直向前滑动，因此除了企业web应用程序等之外，现在这并不是什么大问题）

.attributer用于两个列表框{
最小宽度：960像素；
溢出：隐藏；
字号：0；
}
.选择者
{
浮动：左；
宽度：300px；
高度：100px；
字体大小：14px；
}
.按钮
{
浮动：左；
}
.按钮输入
{
宽度：30px；
高度：30px；
背景色：rgb（34131203）；
颜色：#fff；
边框：1px实心#333；
显示：块；
利润率：13px 16px；
字体大小：16px；
}

联合国组织
磁盘操作系统
特雷斯
联合国组织
磁盘操作系统
特雷斯

Flex box允许在某些情况下避免使用JS，比如您的应用程序

.

---

我想我的解决方案将对您有用。

简短更新！我忘了写，在小屏幕列表框和控制按钮必须有垂直方向。顶部是Listbox目标，底部是控件按钮和Listbox源代码。style=“width:549px；”-div中的这个样式是由javascript添加的。我从listbox目标和listbox源中删除此样式。添加样式：.listbox目标、.listbox源{width:100%；}看起来不错。有可能不带flex吗？我认为有可能不带flex，但是它不会那么灵活和优雅。Flex是常见的做法，甚至Bootstrap4也包括它。我尝试将css与Flex一起使用，但遇到了麻烦。我加上-ms flex:1-webkit-flex:1；要更正IE11中的显示控件，请单击listbox目标和listbox源。但还有其他问题。仅在FF中正常显示，Chrome显示按钮在一行（大屏幕上没有垂直方向），即在大屏幕上像Chrome一样显示，但在小屏幕上显示-垃圾。还有@AlexeiZababurin，请帮帮我！亲爱的Alexander，不幸的是，我并没有很快掌握你们的类和标记的密密麻麻的内容。因此，请更彻底地准备好你的问题，因为它是快速正确回答的基础。

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