jquery - 如何扩展 div 以补偿删除边界 div 的边距？

Question

我正在使用 Bootstrap 的响应式网格布局。我需要调整页面上的一个位置，使两列之间没有边距；左列有一个底部边框，我需要将其调整到右列的左边框。

如何扩展 div 以补偿删除右边界 div 的左边距？

我能做的事情:

• 我可以动态设置左侧 div 的高度，将底部边框放到我想要的位置:$('#indented_block .border-bottom').height( $('#indented_block' ).height()-3 );
• 我能够确定左侧 div 的原始宽度:$('#indented_block .border-bottom').width()
• 我能够确定右侧 div 的左边距:$('#indented_block .border-side').css('margin-left');
• 我可以设置右边 div 的左边距:$('#indented_block .border-side').css('margin-left',0);<

我无法使用 jQuery .width() 方法将原始宽度添加到左边距:$('#indented_block .border-bottom')。宽度( $('#indented_block .border-bottom').width()+$('#indented_block .border-side').css('margin-left')); 相反，我无法准确地将这些值相加(出于某种原因，上面的行将宽度设置为大约屏幕的宽度)。

我创建了一个 JSFiddle with all the relevant HTML, JS and CSS .

Answer 1

在这种情况下，$('#indented_block .border-side')的.outerWidth(true)和.outerWidth(true ) 是 .width() 可以使用的单元的左边距。

所以我用这个 jQuery 修复了它:

var margin_gap=Math.floor( $('#indented_text').outerWidth(true)-$('#indented_text').outerWidth() );
$('#indented_block .border-bottom').height( $('#indented_block').height()-3 ).width( $('#indented_block .border-bottom').width()+margin_gap );
$('#indented_block .border-side').css('margin-left',0);

参见 this working example .