阻止 div 宽度将其推离原位

发布于 2024-12-03 03:43:58 字数 386 浏览 1 评论 0原文

我有 2 个并排的 div。一种的固定宽度为 150px(侧边栏),另一种则调整为父 div 的剩余宽度。

<div style="margin:0 20%">
    <div style="float:left;width:150px">
        Sidebar contents
    </div>
    <div style="vertical-align:top">
        Main contents
    </div>
</div>

当“主”div 的内容超过剩余宽度时,它会展开并向下推到侧边栏下方。如何在不为该 div 定义设置宽度的情况下停止此操作(因为它旨在调整到父宽度)?

I've got 2 divs side by side. One has a fixed with of 150px (sidebar) and one adjusts to the remaining with of the parent div.

<div style="margin:0 20%">
    <div style="float:left;width:150px">
        Sidebar contents
    </div>
    <div style="vertical-align:top">
        Main contents
    </div>
</div>

When the contents of the "main" div exceed the remaining width, it's expanded and pushed down under the sidebar. How can I stop this without defining a set width for this div (since it's meant to adjust to the parent width)?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

妄司 2024-12-10 03:43:58

第二个 div 的 margin-left:150px ?或使用 padding-left:150px 来对齐内容

margin-left:150px for the second div? or use padding-left:150px for aligning content

暖伴 2024-12-10 03:43:58

http://jsfiddle.net/5TYm2/ 这是我相信您正在寻找的东西的工作示例。

这是在包装 div 中分离内容的一种非常常见的方法。

希望这有帮助。

http://jsfiddle.net/5TYm2/ here is a working example of something I believe you're looking for.

This is a pretty common way to go about separating content within a wrapping div.

Hope this helps.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文