css-float 相关问题

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> 如何调整图片右侧的文字和列表，并给图片留出合适的间距线项目符号直接在图像上 - 应该是那样项目符号点将与文本对齐，而不是留给“头：”

html css image flexbox css-float

回答 0 投票 0

为什么浮动的子元素会阻止父元素的填充向内推动元素？

对比我拥有的： h1 { 颜色：蓝色；左填充：.75em； } p { 左填充：1.50em； } 分区{ 底部边距：0.5em； } 标签 { 向左飘浮; 宽度：16em；文本对齐：右； } 输入...

html css css-float padding

回答 5 投票 0

为什么使用浮动后标题h1和nav之间没有间距？

我目前面临与在标题 h1 和导航栏上使用浮动相关的问题。我已经将 float: left 应用于两个元素，期望它们与一些空间并排对齐...

html css css-float

回答 1 投票 0

占满所有宽度的粘性 div

我正在练习html和css，刚开始，我已经卡住了。我有一个粘性的边，它似乎占用了所有可能的宽度并阻止了其他元素的正确定位。我有

html css css-float css-position

回答 1 投票 0

在这种情况下如何让文字环绕图像？

https://codepen.io/hjklhjklhjkl/pen/zYmdmje https://codepen.io/hjklhjklhjkl/pen/zYmdmje <!DOCTYPE html> <html lang="en"> <head>  <meta name="robots" content="noindex"> <meta charset="utf-8">  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">  <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>  <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">  <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>  <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> 所以我希望图像随着屏幕的扩大而扩大。但是，我希望文本移动以环绕图像......我已经尝试了如此多的段落环绕和让图像浮动的组合，但它不起作用！为什么？它以前总是对我有用

html css image css-float

回答 0 投票 0

HTML/CSS 错误破坏 DIV 容器

我们有一个包含六个小部件区域的仪表板，在大屏幕（3 宽，2 高）或移动设备（1 宽，6 高）上看起来不错，但在中型屏幕（2 宽，3 高）上，第二个和第三个小部件“...

html css-float break

回答 1 投票 0

在第 2 组段落上浮动不适用 - CSS - 浮动

我正在上 coursera 课程（约翰霍普金斯大学），并且已经完成了关于浮动的 CSS 讲座。而不是仅仅更改第 1 2 3 4 段第一组的 CSS 应用程序，我会...

html css css-float

回答 1 投票 0

为什么这个简单的引导程序代码不起作用

我正在学习 Bootstrap，我想从头开始制作一个主题，但现在在起点我遇到了一个奇怪的问题——图标贴在页面右侧的徽标上，但浮动：左 wi。 ..

html css twitter-bootstrap bootstrap-4 css-float

回答 2 投票 0

左侧浮动 div 右侧的列表项未正确对齐

列表项项目符号未正确对齐到左侧浮动 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> 所以这将为该部分添加一个特定的高度，最后一个项目符号将正确对齐

html css list css-float

回答 2 投票 0

文本环绕 3D 查看器

我试图让我的 .blog-text 元素中的文本环绕 .glb-viewer 元素，但我似乎无法让它工作。我试过使用 float 来实现这一点，但文本仍然没有换行......

css reactjs layout css-float word-wrap

回答 0 投票 0

如何将元素定位在相关元素旁边

我的导航栏在标记上看起来像这样我希望我的销售文本与其他菜单项对齐，而图标的大小可以不同任何提示如何达到预期的结果？我试过...

css css-position css-float

回答 1 投票 0

空格时获取两列，父项太窄时获取一列

我有两组段落，我称之为左和右 - 请参阅问题末尾的 HTML。当他们的父母足够宽时，我希望他们并排显示在等宽的列中。当他们的