文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >CSS位置:粘稠；在另一个div开始时停止粘着。

问CSS位置:粘稠；在另一个div开始时停止粘着。
EN

Stack Overflow用户
提问于 2022-04-10 23:49:46
回答 3查看 197关注 0票数 4

在滚动时，我试图让我的标题保持在页面的顶部，所以我使用：

代码语言：javascript
复制
.header{
     background-color: #8091F2;
     color: white;
     position: -webkit-sticky;
     position: sticky;
     top: 0px;
     border-radius: 10px;
     height: auto;
}

...but --它不再在页面的一半处“粘稠”，更具体地说是在：

代码语言：javascript
复制
<div class="container_1" id="speeds">
  <div class="float_side">
    <div class="container_2">
      <table>
        <tr>
          <td colspan="3">
            <h2>
              Best Speed: Intel
            </h2>

下面是我的代码：

代码语言：javascript
复制
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AMD Ryzen vrs Intel</title>
    <link rel="stylesheet" type="text/css" href="./Fonts/stylesheet.css">
</head>
<body>
    <div class="header">
        <img class="pics" align="left" src="./images/amd.png">
        <img class="pics" align="right" src="./images/intel.png">
        <table class="center">
            <tr><td>&nbsp;</td></tr>
            <tr>
                <td>
                    <a class="choicePadding" href="#speeds">Speeds</a>
                </td>
                <td>
                    <a class="choicePadding" href="#overclocking">Overclocking</a>
                </td>
                <td>
                    <a class="choicePadding" href="#cores">Cores</a>
                </td>
                <td>
                    <a class="choicePadding" href="#performance">Performance</a>
                </td>
                <td>
                    <a class="choicePadding" href="#price">Price</a>
                </td>
            </tr>
            <tr><td>&nbsp;</td></tr>
            <tr><td>&nbsp;</td></tr>
        </table>
    </div>
    <div class="container">
        <p></p>
        <table>
            <tr>
                <td colspan="3">
                    <h2>AMD vs Intel: Who Makes the Better CPU?</h2>
                    <p>
                        The AMD vs Intel debate has been getting more intense in the past couple of years. Different models from the two manufacturers have different clock speeds, core counts, and other specifications. But once you know what you’re looking for, and what each manufacturer has to offer, the decision-making process will be a whole lot easier. Here’s everything you need to know about the difference between AMD and Intel CPUs, and which one you should buy. 
                    </p>
                    <p>
                        When it comes to AMD vs Intel, it all depends on what kind of use you are. AMD is a good choice for entry- and mid-level users, while Intel makes the best premium chips for pro users. This is because Intel’s high-end chips are faster and more power-efficient than AMD’s.
                    </p>

                    <p>
                        For decades, Intel dominated AMD, and it was considered the brand leader in the CPU market. However, things turned around for AMD when they released the Ryzen 7 series, which was made to rival Intel’s Core i7 offerings.
                    </p>

                    <p>
                        AMD followed through with the launch of Ryzen 3 and 5 models. Their latest offering is the Ryzen 9 3950X, AMD’s first 16-core, 32-thread processor for mainstream use. In contrast, Intel offers the eight-core, 16-thread Core i9-9900K. The company touts it as “the best gaming processor in the world.” Intel’s Core X Processor Series has up to 18 cores and 36 threads, making it the perfect choice for high-end users who are into content creation.
                    </p>
                </td>
            </tr>
            <tr>
                <td>
                    <div class = movePic>
                        <img class="mid_pics" src="./images/amd_chip.png">
                    </div>
                </td>
                <td>
                    <img class="mid_pics" src="./images/intel_chip.png">
                </td>
            </tr>
        </table>
    </div>
    <p></p>
    <div class="container_1" id="speeds">
        <div class="float_side">
            <div class="container_2">
                <table>
                    <tr>
                        <td colspan="3">
                            <h2>
                                Best Speed: Intel
                            </h2>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p>
                                CPU performance is measured in terms of clock speed or clock rate. This number is expressed in gigahertz (GHz), and it tells you how fast the CPU can process data. A higher clock rate means that the CPU can perform tasks better. However, other factors like the number of cores and how fast the CPU can process instructions can also affect CPU performance.
                            </p>
                        </td>
                    <tr>
                        <td>
                            <p>
                                When it comes to speed difference, the AMD vs Intel war is close for entry-level and mid-range products. For entry-level CPUs, Ryzen 3 models are almost just as fast as Intel CPUs. The Core i38350K, for instance, has the highest clock rate in this series at 4.0 GHz, while the Ryzen 3 2300X and 220G models offer a comparable speed of 3.5 GHz. Clock speeds for mid-range AMD processors start at 3.1 GHz with the Ryzen 5 2600E. In comparison, Intel starts at a lower 1.7 GHz with the Core i5 8500T.
                            </p>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p>
                                Intel does offer higher clock speeds for its high-end Core i7 and i9 chips. There are models in the i9 series that have comparable speeds with their Ryzen Threadripper counterparts. However, for this line, Ryzen CPUs are more power-hungry than Intel’s. So, if you want a high-end CPU that performs at high speeds, but is also power-efficient, it is best to go with Intel.
                            </p>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="float_side">
            <div class="container_3">
                <center>
                    <img src="./images/speeds.jpg" class="statpics">
                </center>
            </div>
        </div>
    </div>
    
        

</body>
</html>

下面是CSS文件：

代码语言：javascript
复制
html{
     scroll-behavior: smooth;
}
body{
     background-color: #231B40;
     height: auto;
}
h2{
     text-align: center;
     color: #3c67dc;
}
.pics{
     width: 145px;
     height: 80px;
     padding-top: 10px;
     padding-left: 10px;
     padding-right: 25px;
}
.mid_pics{
     width: 300px;
     height: 300px;
     
}
.movePic{
     text-align: right;
}
.statpics{
     width: 500px;
     height: 725px;
}
.container{
     background-color: #151426;
     font-family: 'PT Sans Regular', sans-serif;
     padding-left: 65px;
     padding-right: 65px;
     color: #BCB4D9;
     font-size: 18pt;
     border-radius: 10px;
}
.container_1{
     font-family: 'PT Sans Regular', sans-serif;
     color: #BCB4D9;
     font-size: 18pt;
     border-radius: 10px;
     padding: 20px;
     height: auto;

}
.container_2{
     background-color: #151426;
     padding: 53px;
     border-radius: 10px;
     height: auto;
}
.container_3{
     background-color: #151426;
     padding: 65px;
     border-radius: 10px;
     height: auto;
}
.float_side{
     float: left;
     width: 45%;
     padding: 20px;
     height: auto;
}
.header{
     background-color: #8091F2;
     color: white;
     position: -webkit-sticky;
     position: sticky;
     top: 0px;
     border-radius: 10px;
     height: auto;
}
.choicePadding{
     font-family: 'PT Sans Regular', sans-serif;
     padding-left: 65px;
     padding-right: 65px;
     color: white;
     font-size: 18pt; 
}
.center{
     margin-left: auto;
     margin-right: auto;
}
a:link{
     text-decoration: none;
}
a:visited{
     text-decoration: none;
}
a:hover{
     text-decoration: none;
     color: #3c67dc;
}

@font-face {
    font-family: 'PT Sans Narrow';
    src: url('fonts/PTSansNarrow-Bold.eot');
    src: url('fonts/PTSansNarrow-Bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/PTSansNarrow-Bold.woff2') format('woff2'),
         url('fonts/PTSansNarrow-Bold.woff') format('woff'),
         url('fonts/PTSansNarrow-Bold.ttf')  format('truetype'),
         url('fonts/PTSansNarrow-Bold.svg#PT Sans Narrow') format('svg');
    font-family: 'PT Sans Regular';
    src: url('fonts/PTSansNarrow-Regular.eot');
    src: url('fonts/PTSansNarrow-Regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/PTSansNarrow-Regular.woff2') format('woff2'),
         url('fonts/PTSansNarrow-Regular.woff') format('woff'),
         url('fonts/PTSansNarrow-Regular.ttf')  format('truetype'),
         url('fonts/PTSansNarrow-Regular.svg#PT Sans Narrow') format('svg');
}

如果有人知道为什么在这张纸上的这个地方不粘，请告诉我，谢谢。

html
css
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2022-04-11 00:14:52

问题来自.float_side具有float:left属性。这是因为当你使用float时，

元素是从页面的正常流中删除的，尽管它仍然是流的一部分(与绝对定位相反)。mdn网络文档

换句话说，divs和float将不会作为文档正常流的一部分来呈现，这会干扰您的粘性标头的出现。

在您的情况下，一个可能的解决方案是将float:left从.float_side中移除，并通过在.container_1上使用display: flex定位这些divs。(您可能希望调整类名.float_side以反映此更改。)

正如David所提到的，还有一个解决方案允许您继续使用float。通过将display: flow-root;添加到.container_1中，您可以创建一个新的块格式上下文，这将导致float div在该框中显示其float行为。这里是代码示例的一个解决方案与display: flow-root。

下面是一个display: flex解决方案的示例：

​

代码语言：javascript
复制
html{
     scroll-behavior: smooth;
}
body{
     background-color: #231B40;
     height: auto;
}
h2{
     text-align: center;
     color: #3c67dc;
}
.pics{
     width: 145px;
     height: 80px;
     padding-top: 10px;
     padding-left: 10px;
     padding-right: 25px;
}
.mid_pics{
     width: 300px;
     height: 300px;
     
}
.movePic{
     text-align: right;
}
.statpics{
     width: 500px;
     height: 725px;
}
.container{
     background-color: #151426;
     font-family: 'PT Sans Regular', sans-serif;
     padding-left: 65px;
     padding-right: 65px;
     color: #BCB4D9;
     font-size: 18pt;
     border-radius: 10px;
}
.container_1{
     display: flex;
     font-family: 'PT Sans Regular', sans-serif;
     color: #BCB4D9;
     font-size: 18pt;
     border-radius: 10px;
     padding: 20px;
     height: auto;
}
.container_2{
     background-color: #151426;
     padding: 53px;
     border-radius: 10px;
     height: auto;
}
.container_3{
     background-color: #151426;
     padding: 65px;
     border-radius: 10px;
     height: auto;
}
.float_side{
     width: 45%;
     padding: 20px;
     height: auto;
}
.header{
     background-color: #8091F2;
     color: white;
     position: -webkit-sticky;
     position: sticky;
     top: 0px;
     border-radius: 10px;
     height: auto;
}
.choicePadding{
     font-family: 'PT Sans Regular', sans-serif;
     padding-left: 65px;
     padding-right: 65px;
     color: white;
     font-size: 18pt; 
}
.center{
     margin-left: auto;
     margin-right: auto;
}
a:link{
     text-decoration: none;
}
a:visited{
     text-decoration: none;
}
a:hover{
     text-decoration: none;
     color: #3c67dc;
}

@font-face {
    font-family: 'PT Sans Narrow';
    src: url('fonts/PTSansNarrow-Bold.eot');
    src: url('fonts/PTSansNarrow-Bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/PTSansNarrow-Bold.woff2') format('woff2'),
         url('fonts/PTSansNarrow-Bold.woff') format('woff'),
         url('fonts/PTSansNarrow-Bold.ttf')  format('truetype'),
         url('fonts/PTSansNarrow-Bold.svg#PT Sans Narrow') format('svg');
    font-family: 'PT Sans Regular';
    src: url('fonts/PTSansNarrow-Regular.eot');
    src: url('fonts/PTSansNarrow-Regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/PTSansNarrow-Regular.woff2') format('woff2'),
         url('fonts/PTSansNarrow-Regular.woff') format('woff'),
         url('fonts/PTSansNarrow-Regular.ttf')  format('truetype'),
         url('fonts/PTSansNarrow-Regular.svg#PT Sans Narrow') format('svg');
}
代码语言：javascript
复制
<body>
  <div class="header">
    <img class="pics" align="left" src="./images/amd.png">
    <img class="pics" align="right" src="./images/intel.png">
    <table class="center">
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>
          <a class="choicePadding" href="#speeds">Speeds</a>
        </td>
        <td>
          <a class="choicePadding" href="#overclocking">Overclocking</a>
        </td>
        <td>
          <a class="choicePadding" href="#cores">Cores</a>
        </td>
        <td>
          <a class="choicePadding" href="#performance">Performance</a>
        </td>
        <td>
          <a class="choicePadding" href="#price">Price</a>
        </td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table>
  </div>
  <div class="container">
    <p></p>
    <table>
      <tr>
        <td colspan="3">
          <h2>AMD vs Intel: Who Makes the Better CPU?</h2>
          <p>
            The AMD vs Intel debate has been getting more intense in the past couple of years. Different models from the two manufacturers have different clock speeds, core counts, and other specifications. But once you know what you’re looking for, and what each manufacturer has to offer, the decision-making process will be a whole lot easier. Here’s everything you need to know about the difference between AMD and Intel CPUs, and which one you should buy.
          </p>
          <p>
            When it comes to AMD vs Intel, it all depends on what kind of use you are. AMD is a good choice for entry- and mid-level users, while Intel makes the best premium chips for pro users. This is because Intel’s high-end chips are faster and more power-efficient than AMD’s.
          </p>

          <p>
            For decades, Intel dominated AMD, and it was considered the brand leader in the CPU market. However, things turned around for AMD when they released the Ryzen 7 series, which was made to rival Intel’s Core i7 offerings.
          </p>

          <p>
            AMD followed through with the launch of Ryzen 3 and 5 models. Their latest offering is the Ryzen 9 3950X, AMD’s first 16-core, 32-thread processor for mainstream use. In contrast, Intel offers the eight-core, 16-thread Core i9-9900K. The company touts it as “the best gaming processor in the world.” Intel’s Core X Processor Series has up to 18 cores and 36 threads, making it the perfect choice for high-end users who are into content creation.
          </p>
        </td>
      </tr>
      <tr>
        <td>
          <div class=movePic>
            <img class="mid_pics" src="./images/amd_chip.png">
          </div>
        </td>
        <td>
          <img class="mid_pics" src="./images/intel_chip.png">
        </td>
      </tr>
    </table>
  </div>
  <div class="container_1" id="speeds">
    <div class="float_side">
      <div class="container_2">
        <table>
          <tr>
            <td colspan="3">
              <h2>
                Best Speed: Intel
              </h2>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                CPU performance is measured in terms of clock speed or clock rate. This number is expressed in gigahertz (GHz), and it tells you how fast the CPU can process data. A higher clock rate means that the CPU can perform tasks better. However, other factors like the number of cores and how fast the CPU can process instructions can also affect CPU performance.
              </p>
            </td>
          <tr>
            <td>
              <p>
                When it comes to speed difference, the AMD vs Intel war is close for entry-level and mid-range products. For entry-level CPUs, Ryzen 3 models are almost just as fast as Intel CPUs. The Core i38350K, for instance, has the highest clock rate in this series at 4.0 GHz, while the Ryzen 3 2300X and 220G models offer a comparable speed of 3.5 GHz. Clock speeds for mid-range AMD processors start at 3.1 GHz with the Ryzen 5 2600E. In comparison, Intel starts at a lower 1.7 GHz with the Core i5 8500T.
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                Intel does offer higher clock speeds for its high-end Core i7 and i9 chips. There are models in the i9 series that have comparable speeds with their Ryzen Threadripper counterparts. However, for this line, Ryzen CPUs are more power-hungry than Intel’s. So, if you want a high-end CPU that performs at high speeds, but is also power-efficient, it is best to go with Intel.
              </p>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div class="float_side">
      <div class="container_3">
        <center>
          <img src="./images/speeds.jpg" class="statpics">
        </center>
      </div>
    </div>
  </div>

</body>

​

票数 2
EN

Stack Overflow用户

发布于 2022-04-11 00:25:09

我同意安德鲁对这个问题的描述。由于浮动元素，container_1的高度正在崩溃。如果您为container_1设置了背景色，您可以清楚地看到这种效果。

但是，如果仍然希望在布局中使用浮点数，则可以向父容器(本例中为清除 )添加一个container_1，以防止其高度崩溃。

在父容器上使用display: flow-root将是一个直接的解决方案：

代码语言：javascript
复制
.container_1{
    font-family: 'PT Sans Regular', sans-serif;
    color: #BCB4D9;
    font-size: 18pt;
    border-radius: 10px;
    padding: 20px;
    height: auto;
    display: flow-root;
}
票数 0
EN

Stack Overflow用户

发布于 2022-04-11 00:26:41

你不需要用左浮动。

代码语言：javascript
复制
.float_side{
     width: 45%;
     padding: 20px;
     height: auto;
}

在此之后，使用以下内容更改.container_1的属性

代码语言：javascript
复制
.container_1{
 display: flex;
 align-items: center;
 justify-content: flex-end;
 font-family: 'PT Sans Regular', sans-serif;
 color: #BCB4D9;
 font-size: 18pt;
 border-radius: 10px; 
 padding: 20px; 
 height: auto;
 }
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/71821406

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档