gpt4 book ai didi

html - 奇怪的标签定位

转载 作者:行者123 更新时间:2023-11-28 18:00:41 24 4
gpt4 key购买 nike

我在容器标签中放置了两个 div。容器只是居中并固定内容。

我想在网站底部的 home-segment 和浏览器底部之间留出空间。然而,出于某种原因,bottom-spacer float 在 home-segment 之上。我怎样才能将它移到 home-segment 下面?

    <div class="container">

// Content

<div class="home-segment">
<div class="col w33 col-first">
<h2>A title</h2>
<p>Lorem ipsum.</p>
</div>
<div class="col w33">
<h2>Hey there.</h2>
</div>
<div class="col w33 col-last">
</div>
</div>

<div class="bottom-spacer"></div>

</div>

CSS:

/* Home Page Columns */

.home-segment { width: 830px; float: left; }
.col-first { margin-left: 0 !important; }
.col.w33 { width: 220px; min-height: 200px; max-height: 200px; border: 1px solid #D9D4D4; background: #fff; margin-right: 15px; }
.col.w33 h2 { font-size: 18px; margin-bottom: 10px; }
.col-last { margin-right: 0 !important; }
.col { display: block; float: left; position: relative; overflow: hidden; padding: 10px; }

.bottom-spacer { padding-bottom: 25px; }

最佳答案

正在转移到top因为您没有清除 float 元素

clear: both; 添加到 .bottom-spacer

.bottom-spacer { clear: both;padding-bottom: 25px; background: #f00;}

Demo


行为的详细解释可以引用我的回答herehere

关于html - 奇怪的标签定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20497898/

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