Question

我有这个HTML：

<div id="subNav"></div>
<div id="feed"></div>
<div id="feedBar"></div>

我已将所有这些div留下了。我设置了#subNav和#feedBar的宽度，但在#feed上我设置了它的最小宽度。即使窗口较大，它也需要最小宽度。有没有什么方法可以浮动你可以使最小宽度工作？我正在尝试在页面上进行灵活的布局。

Answer 1

以下答案使用 JavaScript 解决方案，以回应@ Chromedude的评论（原始问题）：

@David有没有办法覆盖这种行为？用javascript？

我确信有一个更简单的方法（当然使用JavaScript库），但这是我在早上的这个时间（在英国）能够提出的最好的方法：

var feed = document.getElementById('feed');
var width = document.width;
var feedBarWidth = document.getElementById('feedBar').clientWidth;
var subNavWidth = document.getElementById('subNav').clientWidth;
feed.setAttribute('style', 'width: ' + (width - (subNavWidth + feedBarWidth)) + 'px');

JS Fiddle demo

使用jQuery（仅作为库提供的简易建议）：

var bodyWidth = $(document).width();
var subNavWidth = $('#subNav').width();
var feedBarWidth = $('#feedBar').width();
$('#feed').css('width', bodyWidth - (subNavWidth + feedBarWidth));

Answer 2

使用Foundation 3中的网格系统。当放置在表示网格元素的div上时，min-width表现得很好。

要让min-width在没有网格的情况下工作，请使用CSS规则插入一个具有所需最小段落宽度的不可见伪元素。

p:before {
  content: "";
  width: 10em;
  display: block;
  overflow: hidden;
}

更多细节发自source，我在那里学到了这一点。

有没有办法在浮动的元素上设置CSS最小宽度？

2 个答案: