gpt4 book ai didi

html - 如果此 block 较高,如何在左右列之间放置一个内容 div block ?

转载 作者:太空宇宙 更新时间:2023-11-04 00:37:32 26 4
gpt4 key购买 nike

我需要在左右栏之间放置内容,前提是内容 block 高于左右栏 block 。我试着用 float: right;在内容的样式中,它只对齐图中的示例。

enter image description here

如何使列之间的内容 block 居中?我的代码是:

#left {
width:220px;
height:200px;
background:yellow;
float:right;
}

#content {
float:right;
}

#right {
width:220px;
height:200px;
float:left;
background:grey;
}
<div id="main">
<div id="content">Content</div>
<div id="left">left col</div>
<div id="right">right col</div>
</div>

最佳答案

为此只需使用flex。重新排序 div 以将 #content 放在中间并告诉 #content 元素填充剩余空间:

#main {
display: flex;
justify-content: space-between;
}

#left {
width:220px;
height:200px;
background:yellow;
}
#content {
flex: 1 1 auto;
}
#right {
width:220px;
height:200px;
background:grey;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head><title>Example</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="./styles.css" type="text/css" />
</head>
<body>
<div id="main">
<div id="left">left col</div>
<div id="content">Content</div>
<div id="right">right col</div>
</div>
</body>
</html>

如果您绝对必须首先拥有content元素,然后使用order对列顺序进行排序:

#main {
display: flex;
justify-content: space-between;
}

#left {
width:220px;
height:200px;
background:yellow;
order: 1;
}
#content {
flex: 1 1 auto;
order: 2;
}
#right {
width:220px;
height:200px;
background:grey;
order: 3;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head><title>Example</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="./styles.css" type="text/css" />
</head>
<body>
<div id="main">
<div id="content">Content</div>
<div id="left">left col</div>
<div id="right">right col</div>
</div>
</body>
</html>

关于html - 如果此 block 较高,如何在左右列之间放置一个内容 div block ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59104554/

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