gpt4 book ai didi

html - 在两个自动调整的 div 之间居中对齐一个固定宽度的 div

转载 作者:太空宇宙 更新时间:2023-11-04 11:58:35 25 4
gpt4 key购买 nike

如何显示固定宽度 800px 的 div,并且在两侧(左侧和右侧)应该有自动调整的 div。到现在为止,我已经尝试在左侧自动调整 div 上使用 float:left,在中心 div 上使用 widht:800px,在中心 div 上使用 float:right自动调整右 div ,但它不起作用。

这是我到现在为止得到的。注意:中心div的背景为黑色,所有三个div都包含在背景色为红色的容器div中。 result

HTML代码

<body>
<div id="outerSideContainerLeft" style:"float:left">
left

</div>

<div id="feedContainer">
center
</div>

<div id="outerSideContainerRight" style:"float:right">
right
</div>

</body>

CSS 代码

div{
display:inline-block;
}
#feedContainer{
margin:0px;
width:800px;
background-color: black;
}

#outerSideContainerLeft
{
background-color: blue;
width: calc(49%-400px);
}

#outerSideContainerRight
{
background-color: green;
width: calc(49%-400px);
}

最佳答案

尝试 this

这只是将 inline-block 用于 display 并将 calc 属性用于左/右框的宽度。

请记住,一旦屏幕太窄,左/右框就会相互重叠。您可以使用媒体查询来更改布局,使其像 this 一样响应

calc 属性基本上为您计算一个值。我给出的示例中,您有一个宽度为 200px 的中间 div。所以右/左框需要是整个窗口宽度的 50% 减去中间框大小的一半。

所以窗口的 50% 减去 100px,这将为它们提供相对合适的宽度,以便它们填充固定宽度中间 div 周围的线。

除了,使用 inline-block 时有一个奇怪的边距,所以我使用 49% 来代替边距。

关于html - 在两个自动调整的 div 之间居中对齐一个固定宽度的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30009940/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com