100% 宽度容器内的中心 div，具有动态宽度左右浮动

发布于 2024-10-30 17:40:24 字数 509 浏览 0 评论 0原文

我想要在容器 div 内对齐 3 个 div，如下所示：

[[LEFT] [CENTER] [RIGHT]]

容器 div 的宽度为 100%（无固定宽度），并且在调整容器大小后，中心 div 应保持在中心位置。

左右DIV没有固定宽度，需要随容器伸缩。中心 DIV 确实有固定宽度。

我有这个：

<div style="width: 100%">
    <div style="float: left; height: 50px;"></div>
    <div style="float: right; height: 50px;"></div>
    <div style="margin: 0 auto; height: 50px; width: 500px;"></div>
</div>

问题是，左右不显示，因为没有设置宽度

有什么建议吗？

原文

I want to have 3 divs aligned inside a container div, like this:

[[LEFT] [CENTER] [RIGHT]]

Container div is 100% wide (no fixed width), and center div should remain in center after resizing the container.

Left and Right DIV have no fixed width and need to expand/contract with the container. Center DIV does have a fixed width.

I have this:

<div style="width: 100%">
    <div style="float: left; height: 50px;"></div>
    <div style="float: right; height: 50px;"></div>
    <div style="margin: 0 auto; height: 50px; width: 500px;"></div>
</div>

Problem is, the left and right do not show because there is no set width

Any suggestions?

分享到QQ

分享到微博

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

发布评论

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

四叶草在未来唯美盛开 2024-11-06 17:40:24

你无法用纯 CSS 做到这一点。您需要使用 JavaScript。在下面的示例中，中间 div 固定为 400px，而剩余空间则在左右 div 之间分配。使用 jQuery，您可以

function calc() {
    var ww = $(window).width();
    var rem = ww - $('.div2').width();
    $('.div1, .div3').css('width', rem / 2);
}
calc();
$(window).resize(calc);

在 http://jsfiddle.net/M5Ghx/3/ 处检查工作示例

You can't do that with pure CSS. You need to use JavaScript. In the example below Middle div is fixed at 400px while remaining space is be split between left and right divs. With jQuery you can do

function calc() {
    var ww = $(window).width();
    var rem = ww - $('.div2').width();
    $('.div1, .div3').css('width', rem / 2);
}
calc();
$(window).resize(calc);

Check working example at http://jsfiddle.net/M5Ghx/3/

回复收藏 0 原文

毁我热情 2024-11-06 17:40:24

如果您想避免使用 javascript，另一种选择是为中心 div 提供绝对位置，并创建两个 div 用作左侧和右侧 div 内的缓冲区：

<div style="width: 100%; text-align:center">
    <div style="width:50%; height: 50px; float:left">
        <div style="width:250px; height: 50px; float:right"></div>
    </div>
    <div style="margin-right:auto; margin-left:auto; position:absolute; left:0; right:0; width: 500px;height:50px;"></div>
    <div style="width:50%; height: 50px; float:right">
        <div style="width:250px; height: 50px; float:left"></div>
    </div>
</div>

Another option, if you wanted to avoid using javascript, would be to give the center div an absolute position and create two divs to use as buffers within the left and right divs:

<div style="width: 100%; text-align:center">
    <div style="width:50%; height: 50px; float:left">
        <div style="width:250px; height: 50px; float:right"></div>
    </div>
    <div style="margin-right:auto; margin-left:auto; position:absolute; left:0; right:0; width: 500px;height:50px;"></div>
    <div style="width:50%; height: 50px; float:right">
        <div style="width:250px; height: 50px; float:left"></div>
    </div>
</div>

回复收藏 0 原文