0

我正在使用 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')); 相反，我无法准确地将这些值加在一起（由于某种原因，上面的行将宽度设置为大约屏幕）。

我创建了一个包含所有相关 HTML、JS 和 CSS 的 JSFiddle。

4

1 回答 1

0

在这种情况下，和之间$('#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);

请参阅此工作示例。

于 2013-02-12T22:37:22.440 回答