Question

我知道在加载页面时如何从一个元素获取宽度并设置另一个元素的宽度（请参见enter link description here）。

但是如果边的宽度改变了（例如，如果调整浏览器窗口的大小），则元素的宽度不会改变。

如何将一个元素的宽度“链接”到另一个同级/元素？

Answer 1

也许是这样的：

function set_elements_width(_selector){
	var max_width = 0;
	$(_selector).each(function(){
		  var el_width = $(this).width();
		  if(max_width < el_width){
		  	  max_width = el_width;
		  }
	});
	$(_selector).css({'width': max_width});
}

function set_different_width(){
  /* this function for test only */
  $('label:eq(0)').css('width', 10);
  $('label:eq(1)').css('width', 20);
  $('label:eq(2)').css('width', 30);
  $('label:eq(3)').css('width', 25);
}



$(window).resize(function(){
    set_elements_width('label');
});

$(document).ready(function(){
	set_elements_width('label');
});

/* for test only */
label{
       	  border-style:solid;
       	  border-width:1px;
       	  display:inline-block;
       	  overflow:hidden;
       	  padding:2px;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<label style="width:10px;">111</label>
<label style="width:20px;">222</label>
<label style="width:30px;">222</label>
<label style="width:25px;">000</label>
<br/>
<input type="button"  value="set different widths" onclick="set_different_width();"/>
<input type="button"  value="set same width" onclick="set_elements_width('label');" />

将一个元素的宽度始终设置为另一个元素的宽度

1 个答案: