使用CSS 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。 ..
列表项项目符号未正确对齐到左侧浮动 div 的右侧。最小的代码是这样的： aabb<... 列表项项目符号未正确对齐到左侧浮动 div 的右侧。最小的代码是这样的： <div style="float:left; background-color:red;width:100px;">aa<br>bb<br>cc<br>dd</div> <p>Title</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> https://jsfiddle.net/3gw7zsey/ 其他帖子的一些建议及其缺点： 将<ul>显示设置为表格单元格。问题是整个列表被推到右边而没有真正浮动在 <div> 下。 https://jsfiddle.net/962m8egt/ 将position: relative;和left: 1em;添加到<li>。问题在于，这会阻碍右侧浮动 div 中可点击项目的可访问性。 https://jsfiddle.net/962m8egt/1/ 谢谢大家有更好的建议吗？ 默认的list-style-position是outside，你可以把它改成inside适合你的情况： div { float: left; background-color: red; width: 100px; } ul { list-style-position: inside; } <div> aa<br> bb<br> cc<br> dd </div> <p>Title</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> https://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style-position div 元素的内联样式影响项目符号点对齐。 因此，有两种方法可以使右侧部分不受影响。 从内联样式中删除应用于 div 部分的宽度 <div style="float:left; background-color:red;overflow:auto; box-sizing:border-box;">aa<br>bb<br>cc<br>dd </div> <p>Title</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> 保持所有样式不变，并将高度添加到大约 100px 的 div， <div style="float:left; background-color:red;width:100px;overflow:auto; box- sizing:border-box;height:100px;">aa<br>bb<br>cc<br>dd </div> <p>Title</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> 所以这将为该部分添加一个特定的高度，最后一个项目符号将正确对齐
我试图让我的 .blog-text 元素中的文本环绕 .glb-viewer 元素，但我似乎无法让它工作。我试过使用 float 来实现这一点，但文本仍然没有换行......
我的导航栏在标记上看起来像这样 我希望我的销售文本与其他菜单项对齐，而图标的大小可以不同 任何提示如何达到预期的结果？我试过...
我有两组段落，我称之为左和右 - 请参阅问题末尾的 HTML。当他们的父母足够宽时，我希望他们并排显示在等宽的列中。当他们的
我想让我的图像出现在文本的左侧，但是浮动似乎不起作用。我希望对其进行格式化，使图像浮动到 div 中文本的右侧。这是我的代码...