gpt4 book ai didi

css 三列布局

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

我正在尝试设置具有上、左、中、右、下的边框布局。我看过几个例子并尝试过它们,但它们似乎都不起作用。主要问题出在左列、中列和右列。我只能让两个 div 水平对齐,第三个总是位于页脚下方。我需要这个可以调整大小。最好是中心 Pane 将填满直到边框。

我试过向左浮动和向右浮动,但没有任何区别。

到目前为止,这是我尝试过的。 http://jsfiddle.net/xQVWs/2/

<body>
<div class="top-wrapper">
<div class="content-wrapper">
<header>
header
</header>
</div>
</div>

<div class="mid-section">
<div class="left-wrapper">
Left Pane
</div>
<div class="main-content">
Main pane
</div>
<div class="right-wrapper">
right pane
</div>
</div>

<div class="bottom-wrapper">
<div class="content-wrapper">
footer
</div>
</div>

</body>

最佳答案

您可以在前两列中间使用 float:left,在第三列使用 float:right。我会在中间列的包装器上放置一个 overflow:hidden

http://jsfiddle.net/zer6N/1/

.mid-section
{
background-color: blue;
width: 100%;
height:1000px;
overflow:hidden;
}

.left-wrapper, .right-wrapper {
background: #ffff00;
height: 100%;
min-height: 100%;
width: 21%;
display:block;
float:left;
margin:0;
}

.right-wrapper {
background:#efefef;
float:right;
}

.main-content {
background-color: black;
width: 58%;
height: 100%;
margin:0;
float:left;
}

关于css 三列布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15867053/

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