使用CSS float属性将元素定位到其容器的左侧或右侧。
我将 CSS Float 作为道具传递用于特定目的，为此我需要这样输入： 类型道具= { 漂浮： ？？？？ } 常量组件 = ({ 漂浮 }: 道具) => {......} 什么是b...
我一直在研究类似于Suckerfish 的下拉菜单。我现在已经可以使用下拉菜单了，但是我想将一些图像放在链接的两侧。现在我正在使用 div
我知道会发生这种情况，但想澄清为什么，因为我试图更好地了解浮动机制 给定这个 HTML 我知道会发生这种情况，但想澄清为什么，因为我试图更好地了解浮动机制 鉴于此 HTML <div class="wrapper"> <div class="inner first">1</div> <div class="inner second">2</div> <div class="inner third">3</div> </div> 还有这个CSS .wrapper { width: 500px; height: 500px; margin: 100px auto; border: 1px solid black; } .inner { border: 1px solid black; box-sizing: border-box; } .first, .second { float: left; width: 300px; height: 300px; } .third { width: 200px; height: 200px; float: right; } 第三个div并没有一直浮动到右上角，而是与第二个div对齐 我知道会发生这种情况，但我想要更具体的解释为什么（基于什么规则） 好问题，我看到有些人很难理解这一点。根据您的问题，我觉得您想将“3”与框中的右上角对齐。你的内部是500 * 500，你的第一个和第二个是300 * 300，因为它不能容纳总共600，所以第二个将低于第一个。然后有一个 200 的空间用于第三个。它将占用接下来的 200 个空间（第二个空间旁边），并且上面的空间未使用。为了获得所需的输出，您需要如下所示向上移动 3，以便首先利用右上角的 200 空间。 也许这可以帮助你： <div class="wrapper"> <div class="inner third alg">3</div> <div class="inner first">1</div> <div class="inner second ">2</div> </div> CSS代码： .wrapper { width: 500px; height: 500px; margin: 100px auto; border: 1px solid black; } .inner { border: 1px solid black; box-sizing: border-box; } .first, .second { float: left; width: 300px; height: 300px; } .alg{ text-align: right; } .third { width: 200px; height: 200px; float: right; } 我希望现在您能更清楚地了解事情。如果没有在下面评论，我可以用更多例子来解释。 那是因为浮动规则说 浮动框的 outer top 不得高于源文档中较早的元素生成的任何 block 或 floated 框的外顶部。 由于.first右侧空间不足，所以将.second放置在下方。但是，.third 不能放置在 .second 上方，即使它适合 .first 留下的可用空间。 这是因为页面流顺序。当您浮动一个元素时，您并不是将其完全从页面的流动顺序中删除，而是指定它应该将自己定位在元素的左侧或右侧。通过将 div 3 向右浮动，您不会像绝对定位 div 那样将其完全从流程中删除。 在您的示例中，div 一和二的净宽度比父包装器宽。这意味着它们不能在线休息，因此它们会堆叠。 div 位于其前面的元素（div 2）右侧的三个位置，但仍受流顺序的影响，位于 div 1 下方。 如果你不想在 HTML 中将 div #3 放置在 #1 和 #2 之上，最好使用 CSS flexbox 来实现所需的布局。
所以我在我的网站上使用了 100 vh 高的英雄图像。现在图像是绝对定位的，因此我可以相对于图像定位图像上的其他元素，例如徽标、导航和文本。之后...
我有一个父元素，它有一个图像的子元素，并且我有一个段落元素（与图像元素的父元素同级）和一些 lorem ipsum 文本。为什么我在编写 float 代码时会出现这样的情况...
我开发了一个脚本来呈现活跃的 YouTube 聊天以及聊天中的人员摘要。这个想法是聊天项目表将出现在聊天成员列表的右侧。
我有以下标记： 你好... 我有以下标记： <div id="playArea" style="position: relative;"> <div style="position: absolute; left: 295px; top: -1px; width: 313px; height: 269px;">Hello</div> <div style="position: absolute; left: 63px; top: 35px; width: 80px; height: 42px;">World</div> <div style="position: absolute; left: 534px; top: 329px; width: 183px; height: 251px;">Bye</div> </div> 但是我想在“playArea”div 下有一段文本，但因为 playArea 内的所有 div 都是绝对的，所以文本不会出现在最后一个绝对定位的 div 的底部。 我对此进行了研究，并找到了使用 float:left 和 clear:left 的替代方法，但是在第一个 div 上使用此方法后，您无法正确定位 div，因为第二个 div 的起点位于第一个 div 下方，而不是在 (0,0)。关于如何解决这个问题的任何想法。 谢谢 如果我理解正确的话，你只需给“playArea”div正确的高度即可。 编辑：我的意思是，其中所有内容的总高度。 但是我想在“playArea”div下有一段文本，但是因为playArea中的所有div都是绝对的，所以文本不会出现在最后一个绝对定位的div的底部。 你似乎已经知道了所有的尺寸和位置，只需添加另一个绝对定位的 div 并将相对内容放入其中即可。 我对此进行了研究，并找到了使用 float:left 和 clear:left 的替代方法，但是在第一个 div 上使用此方法后，您无法正确定位 div，因为第二个 div 的起点位于第一个 div 下方，并且不在 (0,0) 处。关于如何解决这个问题的任何想法。 您需要删除 position: absolute 才能使浮动正确。只要宽度和高度就足够了。 向左浮动三个内部 div，将 overflow: hidden; 放在 playArea div 上，然后将 <p> 放在三个内部 div 下，并使用 clear: both; 在阅读了您和“BalusC”之间的评论后，您似乎已经修改了 CSS，现在正在尝试浮动您的项目，并使用 margin-top 和 margin-left 进行定位。您完全可以这样做，但是您忘记了您也可以使用负边距来定位元素。例如，如果您使用 margin-top:-10px; 那么它会将元素向上拉（而不是像正常的正值边距一样将其向下推）。所有其他边距也是如此。 这似乎是你现在所缺少的成分。
我不明白如何处理我的CSS代码，以便将导航中的超链接移动到右侧。 HTML 代码： 我的 HTML 代码 CSS代码： CSS代码 我尝试过使用“float”并删除...
我确信之前已经有人问过这个问题，但我不确定术语，这意味着我的搜索结果没有出现任何相关的内容。 我想在我的页面中添加一些相同大小的内容块...
在我的应用程序中，有一个部分列出了文章。显示标题和作者。问题是，当作者无法将标题与一行对齐，但标题又不够长而无法拆分时...
如何在不使用表格、Flexbox 或网格系统的情况下制作网格
正如您在标题中看到的那样，我想在不使用表格、Flexbox 或网格系统的情况下制作网格。但是可以使用浮动。 它应该看起来像这样（不关心确切的颜色）： 我找了一个...
适当调整浮动在图形/图像周围的文本和列表 # flexbox vs float 或其他方法
基于这个问题： 使用右对齐或左对齐时图像在降价中未对齐 首先尝试使用浮动 - 项目符号点的次优定位 图片 { 向左飘浮; 左边距：-52p ...
图形/图像和文本/列表之间的正确距离 - 当浮动或更好的 flex(box) 和文本（右侧）将跟随带有列表的文本[关闭]
img { 向左飘浮; } 使用文本/列表在图像周围浮动文本 如何使用 float 或 flexbox 或任何其他现代方法正确解决这个问题 在这 img { float: left; } <h2>Float text around an image with text/list</h2> <p>How to properly solve this with float or flexbox or any other modern method</p> <p>In this example.</p> <figure> <img src="https://randomuser.me/api/portraits/women/51.jpg" alt="img" style="width:170px;height:170px;margin-right:15px;"> <figcaption>Caption Image</figcaption> </figure> <p></p> <p>Head:</p> <ul> <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum inte </li> <li>rdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</li> </ul> <p>The following text/list alignment would be expected to get (right to the image)</p> <p>Topic :</p> <ul> <li> correct bullet points / list alignment </li> </ul> 如何调整图片右侧的文字和列表，并给图片留出合适的间距 线项目符号直接在图像上 - 应该是那样 项目符号点将与文本对齐，而不是留给“头：”
对比我拥有的： h1 { 颜色：蓝色； 左填充：.75em； } p { 左填充：1.50em； } 分区{ 底部边距：0.5em； } 标签 { 向左飘浮; 宽度：16em； 文本对齐：右； } 输入...
我目前面临与在标题 h1 和导航栏上使用浮动相关的问题。我已经将 float: left 应用于两个元素，期望它们与一些空间并排对齐...
我正在练习html和css，刚开始，我已经卡住了。 我有一个粘性的边，它似乎占用了所有可能的宽度并阻止了其他元素的正确定位。我有
https://codepen.io/hjklhjklhjkl/pen/zYmdmje https://codepen.io/hjklhjklhjkl/pen/zYmdmje <!DOCTYPE html> <html lang="en"> <head> <!--Make it unsearcheable! (for now :))--> <meta name="robots" content="noindex"> <meta charset="utf-8"> <!-- Latest compiled and minified CSS --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Latest compiled JavaScript --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://kit.fontawesome.com/0a48c3a8e0.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="style.css"> </head> <!-- Nav Bar --> <body> <nav class="navbar navbar-expand-lg navbar-dark sticky-top" style="background-color: steelblue;"> <a class="navbar-brand text-center" href="#about">asdf</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show"> <a class="nav-link" href="#projects">Projects</a> </li> <li class="nav-item"> <a class="nav-link" href="#interests">Interests</a> </li> <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show"> <a class="nav-link" href="#contact">Contact</a> </li> </ul> </div> </nav> <div class="dynamic-container"> <!-- Jumbotron --> <div class="jumbotron jumbotron-fluid text-center jumbotron-blue"> <div class="container"> <div class="row"> <div class="col-sm-6 image-container"> <img src="http://via.placeholder.com/200x400" class="image"> </div> <div class="col-sm-4"> <h2 class="jumbotron-heading">asdf</h2> <p class="text-muted">asdf</p> <a href="files/CurriculumVitaeKopie.pdf"><button type="button" class="btn btn-info">asdf</button></a> <a href="files/Artistic Resume Kopie.pdf"><button type="button" class="btn btn-info">asdf</button></a> </div> <script src="script.js"></script> </div> </div> </div> <!--ABOUT--> <div class="container"> <div class="row"> <div class="col-sm-14"> <a id="about" style="position: relative;top: -60px;display: block;height: 0;overflow: hidden;"></a> <h1>About</h1> <p> asdfghjlkasdfghjlkasdfghjlkasdfghjlkasdfghjlkasdfghjlkasdfghjlkasdfghjlkasdfghjlkasdfghjlkasdfghjlkasdfghjlkasdfghjlkasdfghjlkasdfghjlkasdfghjlkasdfghjlkasdfghjlkasdfghjlkasdfghjlkasdfghjlkasdfghjlkasdfghjlkasdfghjlkasdfghjlkasdfghjlk </p> </div> </div> </div> 所以我希望图像随着屏幕的扩大而扩大。但是，我希望文本移动以环绕图像......我已经尝试了如此多的段落环绕和让图像浮动的组合，但它不起作用！为什么？它以前总是对我有用
我们有一个包含六个小部件区域的仪表板，在大屏幕（3 宽，2 高）或移动设备（1 宽，6 高）上看起来不错，但在中型屏幕（2 宽，3 高）上，第二个和第三个小部件“...
我正在上 coursera 课程（约翰霍普金斯大学），并且已经完成了关于浮动的 CSS 讲座。 而不是仅仅更改第 1 2 3 4 段第一组的 CSS 应用程序，我会...
我正在学习 Bootstrap，我想从头开始制作一个主题，但现在在起点我遇到了一个奇怪的问题——图标贴在页面右侧的徽标上，但浮动：左 wi。 ..