使浮动 div 收缩而不是下降到新行

发布于 2024-10-04 15:55:29 字数 720 浏览 2 评论 0原文

有什么方法可以强制浮动 div 缩小而不是换行吗？

我知道我可以在 div 上设置隐式宽度，但它位于菜单上，其中可能包含可变数量的项目。我正在尝试做到这一点，同时尽可能保持网站布局流畅。

#left {
  float: left;
  border: 1px solid #000;
}

#right {
  float: right;
  border: 1px solid #000;
}

<div id="left">
  <p>This div represents the logo</p>
</div>
<div id="right">
  <p>When the window's width is reduced and these divs touch I want this div to shrink instead of falling to the next line.
  </p>
</div>

基本上，我希望 #right 在浏览器窗口缩小时开始缩小，而不是先放下一行，然后在进一步调整窗口大小时缩小。

原文

Is there any way I can force a floated div to shrink instead of going to a new line?

I know I can set implicit widths on the divs but it's on a menu which might have variable amounts of items in it. I'm trying to do this while keeping the site's layout fluid if possible.

#left {
  float: left;
  border: 1px solid #000;
}

#right {
  float: right;
  border: 1px solid #000;
}

<div id="left">
  <p>This div represents the logo</p>
</div>
<div id="right">
  <p>When the window's width is reduced and these divs touch I want this div to shrink instead of falling to the next line.
  </p>
</div>

Basically, I want #right to begin shrinking when the browser window is shrunk rather than having it drop a line first, then shrink when the window is further resized.

分享到QQ

分享到微博