如何扩展 div 以补偿删除边界 div 的边距？答案

【问题标题】：How can I expand a div to compensate for removing the bordering div's margin?如何扩展 div 以补偿删除边界 div 的边距？
【发布时间】：2013-01-27 01:31:14
【问题描述】：

我正在使用 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').width( $('#indented_block .border-bottom').width()+$('#indented_block .border-side').css('margin-left')); 相反，我无法准确将这些值加在一起（出于某种原因，上面的行将宽度设置为大约屏幕的宽度）。

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

【问题讨论】：

请停止搜索“在此处输入链接描述”并进行毫无用处的微小编辑。它阻塞了审查队列。如果您要进行编辑，请实际改进帖子。（也张贴here (link)）
基本上没有。改进非常小，浪费了审阅者的时间。
是的，但是很多帖子都是几年前的。这些修改并没有真正的帮助。

标签： jquery css twitter-bootstrap

【解决方案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。

【讨论】：