gpt4 book ai didi

html - float DIV 提供调整大小的先例

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

我是 CSS 新手,刚从表格专业毕业。我什至不知道如何表达这个标题。我正在为 CSS 的工作方式和处理方式而苦苦挣扎。我制作了目前满意的布局和页面。由于页面上的内容,用户可能会调整页面大小。左列和右列不如中间列重要。为了便于使用,最好放在最前面。

我的正常大小的页面布局是:

--------------------
|-------------------|
|| | | ||
|| | | ||
||Left| Mid |Right|
|| | | ||
|| | | ||
|| | | ||
|------------------||
|__________________||

当我将尺寸调整得更小时,布局会发生变化:

----------------
|--------------|
|| | ||
|| | ||
||Left| Right ||
|| | ||
|| | ||
|| | ||
|--------------|
| Mid |
|______________|

我希望中间的永远是最上面的:

----------------
|--------------|
|| ||
|| Mid ||
|| ||
|| ||
|| ||
|| ||
|--------------|
| Others |
| |
|______________|

我的 CSS:

#page-wrap {
position: left;
display: inline-block;
}

#left {
width: 239px;
height: 711px;
float: left;
}

#mid {
width: 600px;
height: 600px;
float: left;
margin-left: 5px;
}

#right {
width: fit-content;
height: 300px;
margin-left: 5px;
float: right;
}

我的网页布局:

<div class="container">
<div id="page-wrap">
<div id="left"></div>
<div id="right"></div>
<div id="mid"></div>
</div>
</div>

如何让我的页面正常运行?

最佳答案

如果可以的话,我建议使用 flexbox 而不是 floats 进行布局。

You can read a good introduction to flexbox here.

下面的代码片段是您可以如何使用 flexbox 来处理您的布局。我已经更改了您的 HTML,以便首先显示中间内容。我们可以使用 order 属性在调整大小时移动布局。

如果需要,您可以将 em 单位更改为像素。

jsfiddle

#page-wrap {
display: flex;
background: lightblue;
}

#mid {
flex: 1 1 40em;
}

#left {
flex: 0 1 15em;
order: -1;
}

#right {
flex: 0 1 15em;
}


/* specificy when you want the layout to change */

@media (max-width: 800px) {
#page-wrap {
flex-direction: column;
}
#left {
order: 0;
}
}


/* styling for demo */

#left,
#mid,
#right {
border: 1px solid white;
font-family: sans-serif;
font-size: 2em;
height: 600px;
}
<div class="container">
<div id="page-wrap">
<div id="mid">middle content</div>
<div id="left">left sidebar</div>
<div id="right">right sidebar</div>
</div>
</div>

关于html - float DIV 提供调整大小的先例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47260240/

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