CSS3模块提供灵活的布局，提供了广泛的对齐元素选项，同时无需浮动和表格。
我在 Safari 浏览器中的 Flexbox 内遇到 的问题（仅限）。我想创建一个高度相同但宽度不同的图像的水平列表。我无法为每个图像设置准确的高度，因为它......
Flexbox CSS 布局，带有页眉、页脚、部分可滚动侧边栏
我正在尝试以下操作。 我已经尝试了有关各种资源的大量建议，但总是缺少一件事：滚动出现在正文或内容上，标题占用空间并且......
我想要以相等的间距和不同的父项对齐项目，并且不向这些项目添加任何宽度。我尝试了下面的代码但不起作用。请帮我解决这个问题。 我希望将项目以相等的间距和不同的父级对齐，并且不为这些项目添加任何宽度。我尝试了下面的代码但不起作用。请帮我解决这个问题。 <div class="container"> <div class="buttons"> <button>test</button> <button>test</button> <button>test</button> <button>test</button> </div> <button class="outer">test</button> </div> .container{ display:flex; width:100% } .buttons{ display: flex; width: 75%; justify-content: space-between; } .outer{ margin-left:auto } 我的代码链接https://jsfiddle.net/f74ayxh9/ 我想要这样的结果，具有相等的间距和边距，但具有我的 HTML 结构。 谢谢你 您可以使用按钮容器元素上的 display: contents 来完成此操作。 .container { display: flex; justify-content: space-between; outline: 1px solid red; margin: 2em; } .buttons { display: contents; } <div class="container"> <div class="buttons"> <button> test </button> <button> test </button> <button> test </button> <button> test </button> </div> <button class="outer"> test </button> </div>
在底部，Git 按钮和链接“10 分钟阅读”和图像位于相同的位置（前两个在其中，第三个是其自身）。 当我尝试证明内容合理时，差距就产生了......
任何人都可以解释一下，为什么第一个示例向下滚动时速度更快 比第二个？似乎第二个示例在我向下滚动时重新渲染行。 只有当你
我有简单的 HTML/CSS 代码，有 3 个 div ，页眉、内容和页脚。页眉和页脚具有固定高度（170px），内容预计占用剩余的垂直空间。所有三个都已放置
我正在尝试进行弹性盒设计。我不是 HTML/CSS 专家。 我有一个弹性盒设计，带有固定的页眉页脚和占据页面上其余可用空间的内容。
我的页面上有一个组件（在示例中名为网格）。 我希望这个组件能够实现以下限制： -1- 保持 1:1 纵横比 -2- 尽可能大 -3- 留在...
HTML/CSS - 如何在使用宽高比时使内容适合可见页面？
我的页面上有一个组件（在示例中名为网格）。 我希望这个组件能够实现以下限制： -1- 保持 1:1 纵横比 -2- 尽可能大 -3- 留在...
如何使 Flex 容器中的并排 div 在包装自身之前先包装其内容
我有一个包含两个项目的 Flex 容器：一个图像，以及一个包含文本和搜索框的 div。如果窗口足够宽，我希望文本 div 出现在图像的右侧，环绕...
handsontable 的初始宽度在 Flexbox 中设置得不好
我有一个装在灵活盒子里的手动桌子。 https://jsbin.com/rikufelosi/1/edit?html,输出 这种行为很奇怪：至少在Mac下的Chrome或Safari中，加载页面后，
我正在开发一个布局，左侧有一些文本，右侧有一个图像。在它们下面，我有三个较小的图像。我想对齐左侧文本和右侧图像，以便...
我正在努力让我的菜单均匀分布。 它似乎被卡在中间，而没有扩展到两侧的自由空间。 我正在努力让我的菜单均匀分布。 它似乎被卡在中间，而没有扩展到两侧的自由空间。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Testing</title> <style> .navMenu{ display: flex; flex-direction: row; justify-content: space-evenly; padding: 7px; background-image: linear-gradient(rgb(105, 109, 196), rgb(0, 0, 255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), black); } .navMenu ul{ list-style: none; background-color: blue; margin: 0; padding-left: 2%; } ul li{ display: inline-block; position: relative; } ul li a{ display: block; padding: 4px 1dvw; color: white; text-decoration: none; font-size: 1.1em; } ul li ul.dropdown li{ display: block; padding: 8px; } ul li ul.dropdown{ position: absolute; z-index: 999; display:none; } ul li a:hover{ box-shadow: 0 0 1px 3px rgba(255, 255, 255, 0.5); } ul li:hover ul.dropdown{ display: flex; flex-direction: column; padding: 0; } </style> </head> <body> <nav class="navMenu"> <ul> <li><a href="#">Home</a></li> <li> <a href="#">Teams</a> <ul class="dropdown"> <li><a href="#">Cubs</a></li> <li><a href="#">Braves</a></li> </ul> </li> <li><a href="#">Coaches</a></li> <li><a href="#">Videos</a></li> <li><a href="#">Contact</a></li> </nav> </body> </html> 我尝试过均匀间隔、周围间隔、间隔间隔等。没有任何效果像我想象的那样。 它说我需要添加更多详细信息才能发布此问题。 我不知道还能说什么。 复制代码并尝试一下，您就会明白我的意思。 我想不通。 AI先生这样就够了吗？ 我想不通。 AI先生这样就够了吗？ 我想不通。 AI先生这样就够了吗？ 我想不通。 AI先生这样就够了吗？ 我想不通。 AI先生这样就够了吗？ 我想不通。 AI先生这样就够了吗？ 我想不通。 AI先生这样就够了吗？ 我想不通。 AI先生这样就够了吗？ 我想不通。 AI先生这样就够了吗？ 我想不通。 AI先生这样就够了吗？ 我想不通。 AI先生这样就够了吗？ 我想不通。 AI先生这样就够了吗？ 我想不通。 AI先生这样就够了吗？ 我想不通。 AI先生这样就够了吗？ 我想不通。 AI先生这样就够了吗？ 我想不通。 AI先生这样就够了吗？ 我想不通。 AI先生这样就够了吗？ 我想不通。 AI先生这样就够了吗？ 我想不通。 AI先生这样就够了吗？ 我想不通。 AI先生这样就够了吗？ 我想不通。 AI先生这样就够了吗？ 我想不通。 AI先生这样就够了吗？ 我想不通。 AI先生这样就够了吗？ 我想不通。 AI先生这样就够了吗？ 我想不通。 AI先生这样就够了吗？ 我想不通。 AI先生这样就够了吗？ 我想不通。 AI先生这样就够了吗？ 您遇到的问题是因为容器“.navMenu”内的“ul”具有背景颜色和填充，因此 Flexbox 没有按照应有的方式布局项目。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Testing</title> <style> .navMenu{ display: flex; flex-direction: row; justify-content: space-evenly; padding: 7px; background-image: linear-gradient(rgb(105, 109, 196), rgb(0, 0, 255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), black); } .navMenu ul{ list-style: none; margin: 0; padding: 0; display: flex; flex: 1; } ul li{ display: inline-block; position: relative; flex: 1; } ul li a{ display: block; padding: 4px 1vw; color: white; text-decoration: none; font-size: 1.1em; text-align: center; } ul li ul.dropdown li{ display: block; padding: 8px; } ul li ul.dropdown{ position: absolute; z-index: 999; display:none; } ul li a:hover{ box-shadow: 0 0 1px 3px rgba(255, 255, 255, 0.5); } ul li:hover ul.dropdown{ display: flex; flex-direction: column; padding: 0; } </style> </head> <body> <nav class="navMenu"> <ul> <li><a href="#">Home</a></li> <li> <a href="#">Teams</a> <ul class="dropdown"> <li><a href="#">Cubs</a></li> <li><a href="#">Braves</a></li> </ul> </li> <li><a href="#">Coaches</a></li> <li><a href="#">Videos</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </body> </html>
我是一个完全的初学者，没有 html 或 css 的先验知识。话虽这么说，我已经成功创建了一个令我满意的简单网站。直到我需要包含较小视图的尺寸......
如何使用卡片制作响应式 CSS 布局，使卡片的顶部和底部部分与行中最高的部分保持相同的高度
我有一个布局，我想在其中显示多个“卡片”。每张卡片由垂直排列的 3 个部分组成。顶部部分将包含不同长度的文本
我正在开发一个基本网站的一部分，该部分需要左侧有图像和文本，右侧需要其他较小的框。 左侧应该占据可用屏幕的 60% 并且......
我正在尝试这样做： 我尝试了 flex 但找不到解决方案。 .container {显示：flex;弹性包裹：包裹；} .col1 {宽度：50%；背景颜色：#ccc;} .col2 {宽度：50%；背景颜色：r...
我想知道是否有办法每行有 4 个项目，但没有带有 <4 items to stretch to fill the space. .item-container { display: inline-flex; flex-wrap: wrap; flex-dir...
我想制作一张完全响应式的卡片（图 1），并且可以支持位于其左侧的两张卡片，在我正在构建的网站上总共三张卡片（图 2）。我已经编码了
为什么 <p> 标签中的文本会从屏幕上消失？ （HTML、CSS）
我是 Web 开发新手，正在研究 HTML 和 CSS。我使用了一个 标签，其中包含一堆文本，但它在屏幕上不完全可见。我几乎看不到半个字... 我是 Web 开发新手，正在研究 HTML 和 CSS。我使用了一个 <p> 标签，其中包含一堆文本，但它在屏幕上并不完全可见。我几乎看不到屏幕左侧的半个字符，我不确定出了什么问题。 该元素在 intro_text 标签下有一个类 section。最初，当出现此问题时，我没有使用 <p> 标签或 intro_text 类的 CSS。然而，在使用display: flex和justify-content: center之后，屏幕左侧开始出现一些单词。我仍然不确定问题是什么或导致它的原因。 HTML： <!DOCTYPE html> Document <header> <h1 class="website_title"> Anime Site </h1> <nav class="navigation"> <ul> <li>Section1</li> <li>Section2</li> <li>Section3</li> <li>Section4</li> </ul> </nav> <div class = "logo"> <img src="./images/anime_logo.jpeg" alt="Anime Logo" class="logo_img"> </div> </header> <main> <section class="section1"> <div class="intro_text"> <p> This is some text about the website, so let'sThe .logo .logo_img class applies a margin-top of 150px and the .section1 class applies a margin-top of 300px. These large margins might be pushing content, including your <p> tag, off the visible part of the screen, especially on devices with smaller screens. Try reducing these margins to see if it brings the text back into view. go. This text is getting bThe .logo .logo_img class applies a margin-top of 150px and the .section1 class applies a margin-top of 300px. These large margins might be pushing content, including your <p> tag, off the visible part of the screen, especially on devices with smaller screens. Try reducing these margins to see if it brings the text back into view.igger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger</p> </div> <figure class="images_anime_container"> <img class="images_anime" id="image_isekai" src="./images/isekai_image.avif"> <figcaption> Love characters who get transported to a magical or fantasy world where they have adventures? It’s like they’re suddenly living in a completely different place with its own rules and challenges. If yes, welcome to the world of Isekai anime</figcaption> </figure> <figure class="images_anime_container"> <img class="images_anime" id="image_mecha" src="./images/mecha_anime.avif"> <figcaption> Are you into giant robots and thrilling battles? Mecha anime features massive robots piloted by humans, often set against the backdrop of futuristic wars or intense conflicts. It's a world where technology and action combine to create epic stories. If this sounds exciting, then mecha anime is definitely for you!</figcaption> </figure> <figure class="images_anime_container"> <img class="images_anime" id="image_adventure" src="./images/adventure_anime.jpeg"> <figcaption> Love the thrill of exploration and epic journeys? Adventure anime takes characters through exciting landscapes and challenges, from mystical lands to uncharted territories. It’s all about quests, discoveries, and sometimes, finding oneself along the way. If you’re up for an adventure, these anime will take you on unforgettable journeys!</figcaption> </figure> <figure class="images_anime_container"> <img class="images_anime" id="image_romance" src="./images/romance_anime.jpeg"> <figcaption> Do you enjoy stories about love and relationships that tug at your heartstrings? Romance anime explores the complexities of love and emotions through beautifully crafted narratives. Whether it's a first crush or a deep bond, these stories will immerse you in the journey of the heart. If you're a fan of romance, these anime are a perfect match!</figcaption> </figure> </section> </main> CSS： CSS 代码图像 .website_title{ float: left; display: inline-block; } .navigation ul{ list-style: none; float: right; } .navigation ul li{ display: inline; margin: 10px; } .navigation ul li:hover{ text-decoration: underline; } .logo .logo_img{ height: 400px; width: auto; margin-top: 150px; } .logo{ display: flex; justify-content: center; } .section1{ margin-top: 300px; display: flex; justify-content: center; align-items: center; } .images_anime{ height: 300px; width: 250px; margin: 20px; } .intro_text p{ display: flex; justify-content: center; } 我尝试过 Stack Overflow，它表明问题源于在 margin 之后使用 float 某处...并且删除边距部分没有帮助（请注意，这不适用于 p 标签或 intro_text上课但为了.navigation ul li）。 目前，我已经做到了这一点，它有点帮助，但实际上并没有帮助。我可以在屏幕左侧看到大约 2 个单词。 .intro_text p{ display: flex; justify-content: center; } 网页当前状态 原因是 display: flex; 的 .section1 – 它将 p 和所有后续图像排列在一起。 如果您想要 display: flex;文本和所有图像*彼此*，可以从 .section1中删除flex-direction: column或添加 p。 如果您想要 p 文本下方的图像，请将图像放在一行中，将另一个 div 容器包裹在图像周围，然后将 display: flex; 添加到该容器中。