Flexbox容器未正确包含项目
Flexbox是一种用于网页布局的CSS模块，它提供了一种灵活的方式来排列和对齐网页元素。Flexbox容器是指应用了Flexbox布局的父元素，而Flexbox项目则是指容器内的子元素。
当Flexbox容器未正确包含项目时，可能会导致布局出现问题。这种情况通常发生在以下几种情况下：
- 容器未设置display属性为flex或inline-flex：Flexbox布局需要将容器的display属性设置为flex或inline-flex，以启用Flexbox布局。
- 容器未设置宽度或高度：Flexbox容器需要设置宽度或高度，以便正确包含项目。如果容器没有明确设置宽度或高度，它将根据项目的大小自动调整。
- 容器未设置flex-direction属性：flex-direction属性用于指定项目在容器中的排列方向。如果未设置该属性，默认值为row，即水平排列。如果项目在容器中未按预期排列，可能是由于未正确设置flex-direction属性。
- 项目未设置flex属性：flex属性用于指定项目在容器中的伸缩能力。如果项目未设置flex属性，它将按照默认的flex-grow: 0、flex-shrink: 1、flex-basis: auto的规则进行布局。如果希望项目具有特定的伸缩能力，需要设置相应的flex属性。
解决Flexbox容器未正确包含项目的问题，可以按照以下步骤进行：
- 确保容器的display属性设置为flex或inline-flex。
- 设置容器的宽度或高度，确保容器能够正确包含项目。
- 根据需要设置flex-direction属性，以指定项目在容器中的排列方向。
- 为项目设置合适的flex属性，以控制项目在容器中的伸缩能力。
腾讯云提供了一系列与云计算相关的产品，可以帮助开发者构建灵活可靠的云计算解决方案。其中与前端开发相关的产品包括腾讯云CDN（内容分发网络）和腾讯云COS（对象存储），可以加速网页内容的传输和存储。与后端开发相关的产品包括腾讯云云服务器（CVM）和腾讯云云数据库（CDB），可以提供可靠的计算和存储资源。此外，腾讯云还提供了云原生服务、人工智能服务、物联网服务等多个领域的产品，可以满足不同场景下的需求。
更多关于腾讯云产品的详细介绍和文档可以在腾讯云官方网站上找到：
- 腾讯云CDN：https://cloud.tencent.com/product/cdn
- 腾讯云COS：https://cloud.tencent.com/product/cos
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库（CDB）：https://cloud.tencent.com/product/cdb
请注意，以上只是腾讯云提供的一些相关产品，其他云计算品牌商也提供类似的产品和服务。
相关·内容
1回答
我需要我的元素在一行中，居中的高度，并有右水平对齐在有界块。我试着使用flexbox来解决这个问题，所有的东西都只适用于一行项目，否则溢出的元素会占用所有可用的空间，并且它看起来不会正确对齐。
.flex {
width:80px;
display: flex;
align-items: center;
justify-content: flex-end;
}
span {
text-align:right;
}
<div class="flex">
<i>0</i>
<span>
g
浏览 8提问于2016-08-15得票数 0
1回答
居中模式窗口
、、、
我想将此日期选择器居中，以使其在移动设备上更易于使用，但我无法使其正常工作。我目前正在尝试这种方法：
.picker {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 40%;
}
...but不走运。它在水平方向上居中，但并不正确，并且模式会随窗口大小而缩放。在垂直方向上，它根本没有居中。
我也试过用jQuery把它居中，但我也不能正常工作。
小提琴：
浏览 0提问于2015-04-28得票数 0
2回答
当我的菜单转到汉堡包菜单项获得display:block值。但我的项目没有得到正确的顺序，因为最后3个项目的float:right属性。
我被困在想法中，我可以做两个菜单，但我认为这不是正确的方式。
浏览 1提问于2017-08-20得票数 0
是否可以在flex容器中包含3个项目，但它们的显示方式如下：
1 3 2 3
基本上，第1项和第2项在左侧，以及它们各自需要的高度，那么第3项是右对齐的，但会拉伸弹性容器的整个高度？
下面是一个要说明的代码：
浏览 0提问于2016-02-17得票数 1
我有一个行(容器)，它包含三个项，我想在行的左边或右边以相等的空间水平显示它们。我用的是适配内容的柔性盒:空格。
这是在Firefox (最近版本)和中；其他我还没有测试过的浏览器。
这过去很好，直到我做了一些(据我所见)完全不相关的重构，没有改变CSS。然后，突然之间，这三个项目不再涵盖整个包含行。相反，行的右边有一个空格(即行中最右边的项的右边)。
还可以看到下面的屏幕打印。在横幅下面，您可以看到这三项(正方形，实际上是list元素，容器行是无序列表)。你看到的是右边的空间。我想要的仅仅是显示条目行的宽度与横幅相同，即1280 in，正如您在Firefox检查器工具中看到的那样。您还可以在
浏览 1提问于2016-12-23得票数 0
1回答
我需要创建一个下拉导航菜单，包装到两行时，它真的很长。
通过在菜单上设置以下CSS属性，我可以获得所需的结果。
.dynamic {
position: absolute;
max-height: 80px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
然而，这在Internet Explorer11上不起作用。项目不会像在Chrome上那样换到下一行。
这是一个
如果我使用height: 80px而不是max-height: 80px;，它可以工作，但这对我不起作用，因为我希望菜单随着项目的增长而增长
浏览 0提问于2016-04-26得票数 1
2回答
css居中方框，不对齐居中
、、、、
import React from 'react';
import { render } from 'react-dom';
const styles = {
display: 'flex',
justifyContent: 'center',
flexWrap: 'wrap',
};
const item = {
width: '26%',
}
const container = {
marginLeft: 'auto',
margi
浏览 0提问于2017-11-06得票数 1
2回答
我已经为此挣扎了几天了。我用谷歌搜索了很多，但找不到正确的答案。我正在建立一个网站，并希望使其充分响应。在我的主页上，我有3块tekst (每个块300宽)。在大于1000像素的屏幕上，它们居中。在此之前，我没有任何问题。
但当屏幕变小到1000像素以上时，我希望这些块在彼此的下面，并居中显示它。以我的想法为例，访问.If你让你的浏览器变小，3个推广区块会自动改变以适合你的屏幕。
我还希望积木始终保持队形。或垂直3个区块或水平3个区块。而不是1行上的2个块和它们下面的行上的另一个块。
我尝试将div容器设置为width: 60%，但是在较小的屏幕上，我在左侧得到了一个很大的空间。积木也不像我希
浏览 1提问于2015-10-15得票数 0
我有一个既包含图像又包含一些文本的容器。我想要的文本是垂直和水平居中的图像。
似乎最简单、最具前瞻性的方法是使用Flexbox和文本的绝对定位：
.container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.text {
position: absolute;
}
<div class='container'>
<div class='text'>
This should
浏览 5提问于2017-06-08得票数 9
回答已采纳
因此，我似乎误解了关于柔性盒的一些东西，不能正确地解决这个问题。
我有一个柔性箱容器，它包含四个列，它们是柔性箱容器的直接子列。一旦浏览器窗口宽度达到992px和更低，我想要更改，这样..flexbox项就占用了容器的50%的宽度。
问题是:如果我没有在..flexbox容器上使用“gap”属性，但是一旦我输入了gap: 1em，那么百分比就不能正常工作了，因为我知道gap是被考虑在内的，并且把这些.don项目的宽度相加。
问题:我如何正确地确保一旦浏览器窗口是992 so或更低，每个flexbox项占50%，这样我就可以在每一行中有两列，因为显然我可以使用“宽度”属性并给它假设45%的属性，
浏览 6提问于2022-05-25得票数 1
回答已采纳
这个问题在这里已经有答案了： 高度百分比HTML 5/CSS(6个答案) 昨天关门了。 我有以下代码： * {
box-sizing: border-box;
}
html,
body {
height: 100%;
padding: 10px;
}
body {
position: relative;
}
#outer {
position: absolute;
top: 0;
left: 0;
border: 2px solid green;
padding: 5px;
max-width: 100%;
max-height:
浏览 39提问于2021-02-28得票数 1
回答已采纳
2回答
在下面的示例中，我想要的是，当.inner-flexbox的子元素可以放进一行时，让它拥有flex-direction: row;，但如果不能，则切换到flex-direction: column;。我不认为媒体查询是我想要的，因为我将根据视口宽度是否大于或小于.inner-flexbox中所有.inner-flexbox的宽度以及<aside>的宽度。基本上，我不希望在.inner-flexbox包装内的项目-我希望它们都在一行，或所有在一列。
(蒸馏的例子)：我有一个包含两个项目的柔性盒。一个是“正常”元素，另一个是另一个柔性盒。
.outer-wrapper
{
浏览 0提问于2017-04-07得票数 7
回答已采纳
2回答
我有一个包含两个子flex项的flexbox标题。这些flex项又有自己的子项。
有没有一种方法可以覆盖flex项目的垂直对齐方式，使它们的子项在底部对齐？
div.flexbox {
display: flex;
align-items: stretch; /* cross axis */
justify-content: space-between; /* main axis */
flex-flow: row wrap;
border-bottom: 1px solid #ddd;
min-height: 100px;
}
.item-1, .item-2
浏览 0提问于2012-12-23得票数 3
回答已采纳
1回答
我使用<table>显示一些表格数据，因为我已经实现了
我省略了JS部分，因为它在这里并不重要。我将把它连接起来，这样单击任何行都会为该行展开某种面板(一次只有一个面板可见)。
这张图片正好显示了我希望面板显示的样子。我需要面板是一个容器，占用包含表的元素的整个宽度(这个元素比表更宽)。此外，重要的是要保持最左边的表列具有其最宽值的宽度，就像当前的情况一样。
有人知道一个直接的技巧来实现这一点吗？
理想情况下，这只涉及css和html；也就是说，不需要使用JS度量某些元素和设置其他元素的css支持(当然，JS将用于添加类和dom节点，但我不需要在解决方案中包含这一点)。
备注：
浏览 0提问于2013-12-30得票数 2
我有一个有3行的CSS表格。可能只有不到3个项目需要填充，我想从底部开始填充它。
我已经创建了一个供您使用，但它目前无法执行我想要的操作。
html, body, div {
height: 100%;
}
div {
display: grid;
grid-template-columns: 1;
grid-template-rows: repeat(3, 1fr);
/* MISSING RULE */
}
<div>
<p>Last item</p>
<p>Second last item</p>
浏览 1提问于2020-04-03得票数 4
3回答
**我想将className Navbar_icon的div移到导航栏的右侧。Navbar_icon包含搜索、帮助、登录。我希望将className Navbar_icon的div移到导航栏的右侧。Navbar_icon包含搜索、帮助、登录。**当前导航栏图片：< ? REACT COMPONENT JSX CODE :
<div className="Navbar">
<h1 className="logo">eat24/7</h1>
浏览 41提问于2021-10-21得票数 0
2回答
我想要创建一个两列布局(仅CSS，没有javascript)。
有几个要求使这一问题变得复杂：
容器以特定高度开始(例如，200px)
有两列
项填充列1，如果需要更多的空间，则填充列2。
如果第1列和第2列已满，则展开容器的高度。
详细示例。
Bad
好
元素首先填充第1栏：
接下来，元素填充第2列：
当达到容器的最小高度时，容器扩展，元素在两列之间重新流动：
浏览 4提问于2017-01-19得票数 3
我有一个flexbox，它有一个用align-items: stretch声明的直接子对象。
在这个flexbox的直接子容器中，我希望有一个div容器，它也使用其父容器的全高(通过设置height: 100%)。
但是，div容器不会伸展到父容器的100%高度，除非我还在flexbox的直接子容器上设置了height: 100%。
这是一种bug吗？我必须用align-items: stretch和height: 100%设置flexbox的直接子组件才能实现我想要的效果吗？在我看来这是多余的。
下面是一个示例：
html,
body {
margin: 0;
height: 1
浏览 0提问于2015-11-01得票数 8
回答已采纳
我有一个包含一些动态生成内容的网页，在这个页面上我有一个大div (我们将称之为容器)，它包含其他div(我们将调用这些组)，每个div( groups)包含许多输入字段。(事先不知道有多少，但我可以把它限制在1-10左右)。
我需要在同一行的组中的每一个输入，所以在一个组中没有换行符(如果这个术语在这个上下文中是正确的)。在一行中可以有尽可能多的组，但新行上的第一个输入始终需要是该组中的第一个输入。
目前，我有大部分的工作，除了整个线打破的事情。以下是当前情况的。
如您所见，组被分解，第一行上的最后3个输入应该已经在下一行上。
是否有一种方法可以对div中的所有元素禁用这种断行行为，同时保持
浏览 3提问于2020-04-13得票数 0
回答已采纳
2回答
我有一个flex布局，包含两个flex项，显示为行(flex-direction: column)。这些项目应该有一个最小的高度，但他们应该保持相同的高度，其中一个需要增长。请参见并减小结果窗格的宽度；这将强制第二个.component元素增加其高度，但第一个.component元素的高度保持不变。
是否有可能强制flex项目保持相同的高度？请注意，其中的主要内容是两个.component元素的堆叠，如果没有flex-direction: column，我无法实现这一点；flex-direction: row可以使相同的高度成为可能，但堆叠不起作用。
这是我到目前为止所得到的结果：
div
浏览 3提问于2016-06-21得票数 13
回答已采纳
我有一个包含项目列表的div。用户可以在列表中添加或删除项目，因此div会不断更改高度以补偿列表大小的变化。
我在它的右边有另一个div，它应该给出左边项目的详细信息。如何让右侧的div始终与左侧div垂直对齐，并在左侧div列表中添加和删除项目时更改高度，使其与左侧div当前的高度相等？
浏览 0提问于2015-04-12得票数 2
因此，我尝试使用CSS在导航栏上设置链接的样式。当我使用设置的像素值设置链接之间的space属性时，它工作得很好。 padding: 0 3rem; 但是，当我将这一行替换为使用以下代码以实现可伸缩性时 padding-left: 15%; 它会在我的屏幕上造成一个小故障，当我点击它们时，它会在靠近的地方扩大。Initial经过各种交互后，填充的链接慢慢扩展到合适的大小。After some interaction然后当我按下一个链接时(这个链接还没有设置任何内容，所以它会返回到主页)，填充就会回到0。然而，代码在控制台内的设备上运行得很好，只是在我测试时不能在浏览器上运行。这是否与Reac
浏览 14提问于2020-03-19得票数 0
回答已采纳
2回答
如何定位一个元素，使其始终位于容器的底部，而不使用“绝对”定位？我有一个包含两个元素的容器，其中一个是文本描述，所以它可以和文本一样大。我希望将第二个元素放置在页面底部，而不管之前的div中的文本是否为空，如果文本不是空的，我希望在它们之间填充10‘t。
浏览 2提问于2016-10-05得票数 3
回答已采纳
1回答
我正在尝试垂直对齐我的登录屏幕。，并使用css
.flexbox-container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;.
align-items: center;
}
我不会让我的项目垂直居中。我将无法实现它，因为我使用bootstrap类来水平居中。
浏览 0提问于2016-04-11得票数 7
回答已采纳
2回答
我的代码(full version)： <div class="modal-body">
<div class="container">
<div class="row">
<div class="col-8 p-0">
<form class="form-group">
<form>
<input type="text" class
浏览 6提问于2019-06-02得票数 1
3回答
看一看这张图片：
如您所见，2端链接从锚容器中断开。
这只发生在iPad上(使用模拟器进行测试)。
在桌面上，它的行为应该是打破其他链接中的单词，从而允许更多的空间来分发其余的项目。
就好像ios不知道如何正确地破坏第一个链接中的文本一样。
.nav-section {
padding: 0 30px;
}
.nav-section__list {
display: inline-flex;
align-items: stretch;
margin: 0 auto;
}
.nav-section__item {
padding: 0 20px;
}
.nav
浏览 8提问于2016-08-05得票数 18
1回答
docker-compose.yml
version: "3.7"
services:
myservice:
build: .
command: python -m main
volumes:
- /home:/home
我启动了docker-compose up --build，在项目文件夹中，我看到了带有锁的/home文件夹。如何正确移除？因为我不需要它
浏览 0提问于2021-02-06得票数 0
我有一个侧边菜单栏，将有不同数量的列出的项目，这取决于哪个页面被显示。如何使用将列出的项均匀地垂直排列到浏览器窗口？
浏览 16提问于2017-02-12得票数 2
回答已采纳
我正在创建一个自助网站，仅用于练习目的。我在我的主要内容(不包括标题和页脚)的右侧放置一个“旁注”栏(包含历史上相关的引语)时遇到了麻烦。
“float”属性将aside列放在所有内容的右侧，但将它放在底部。我试过使用'flexbox‘，这似乎解决了'aside’元素的问题，但它将页脚垂直放置在内容的顶部(&覆盖部分内容)，而不是水平放置在底部，同时将页眉移动到内容的左侧(它应该位于静态导航栏的顶部)。这就是它的作用：
有人能帮我吗？我真的很感激。
body {
display: flex;
width: 800px;
height: auto
浏览 0提问于2018-09-16得票数 0
2回答
我们有一个用Flexbox完成的瓷砖项目的遗留部分。项目的容器是一个ul。
ul.icon-grid {
display: flex;
flex-wrap: wrap;
list-style: none;
padding-left: 0;
}
然后里面的项目是li
.icon-swatch__wrapper {
width: 180px;
height: 110px;
text-align: center;
font-size: 12px;
border: 1px solid #ccc;
margin: 5px;
padding: 10px;
浏览 5提问于2017-05-15得票数 1
回答已采纳
1回答
我有一个具有行方向的父Flex容器(.content-flexbox-row)，在这个容器中，我正在创建另一个具有列方向(3列)的flex。
第一列我有3个项目，第二列我有1个项目，第三列我有2个项目。
我在这里面临的问题是第二列和第三列在第一列的基础上占据中心位置。
我希望第2列和第3列数据从头开始，而不是从中心开始。
.content-flexbox-row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: 60%;
margin: 0 auto;
border-bottom: 1px
浏览 3提问于2017-04-12得票数 1
我正在尝试让我的页面显示文本和图标后面的图像。这是我目前所拥有的：
import React from 'react';
import SamplePicture from '../../images/sample-picture.jpg';
class Front extends React.Component {
render() {
return (
<div className="ui segment">
<img className=&#
浏览 2提问于2020-07-22得票数 2
我有一个项目的用例，其中有一个使用css calc来确定其位置的模式。
JsFiddle：
.modal {
position: relative;
display: flex;
display: -ms-flexbox;
top: 2.286rem;
max-height: calc(100% - 2.286rem * 2);
max-width: calc(100% - 2.286rem * 2);
}
在Chrome上，它可以按需要工作。我可以调整浏览器的大小和模式保持完美的位置。
问题是在IE10 (显然)中，模态最初加载并且超过了它的max-height，直到
浏览 2提问于2017-05-19得票数 1
1回答
当我有一个引导网格，其中包装的项目是不同的高度，我使用如下规则，以确保我有相同数目的项目在每一行。
.col-sm-6:nth-child(3),
.col-sm-6:nth-child(5),
.col-sm-6:nth-child(7),
.col-sm-6:nth-child(9) {
clear: both;
}
我知道这不是最好的方法。如果我有一个非常大的网格，我需要为每一行指定明确的位置，并像这样显式地执行它。
如何将其写入重复规则，而不必指定每一行包装元素的开始？
浏览 1提问于2016-12-02得票数 0
回答已采纳
2回答
我试图创建这样一个3 div布局：
这样我就可以在左边的div里放一个图像，然后在右上角的div里放一个段落，在右下角的div中放一个段落。
我在弄清楚怎么用柔性盒来做这件事有点麻烦。在我看来，我需要5个div之类的东西。
<div class='flexbox'>
<div class='container-one'></div>
<div class='container-two'>
<div>
<p>&l
浏览 0提问于2018-12-19得票数 0
回答已采纳
我在flex容器中有一个div。我需要以编程方式改变位置-改变top和left -和大小-改变width和height这个div。我该怎么做。Flex忽略对top和left的更改，但似乎接受对width和height的更改。
浏览 1提问于2017-03-30得票数 0
我在我的一个项目中使用react-chartjs-2，我找不到图表的问题，因为在手机上所有的标签和图例仍然是大的af。我试过responsive: true，maintainAspectRation: true。毫无办法
浏览 0提问于2018-12-03得票数 3
2回答
我有一个用Gatsby版本2制作的页面，我想在一个flexbox容器中用gatsby-image制作组件。当我删除display: flex;属性时，图像就会出现，当容器是flex容器时，图像就会消失。
当我在开发工具中查看Gatsby应用的CSS样式时，我尝试逐个取消选择属性。当我取消选择position: absolute;属性时，图像会出现，但它的大小或位置不正确。
我还尝试在容器上设置flex-direction: column;，这会使两个图像中的第二个图像出现。但是，我更希望这个值是row。
在图像上设置overflow: visible !important;未使图像显示。
im
浏览 40提问于2019-07-08得票数 12
回答已采纳
1回答
对齐列表项
、、
我有一个由两列组成的列表，如下所示
我需要第二列的列表项始终与列表的右边界对齐，而不是文本右对齐，但如下所示：
因此，具有最长单词的项目实际上是文本右对齐的，但其他较短的项目正好从最长的项目开始。到目前为止的css列表是
ul{
column-count:2;
}
浏览 4提问于2021-02-22得票数 0
2回答
我有一个.container和3个元素。容器是全宽的，它的子项靠左对齐。我想把所有的东西都放在中心。
这是一个布局
.container
.element1
.element2
.element3
这就是我想要的
.container {
.invisible-wrapper-with-css {
.element[1-3] {
}
}
}
我不想添加任何html。
有没有办法把.element[1-3]当作一个项目，或者有没有办法--只用CSS --把它们包装起来，这样我就可以给.element[1-3]子类的包装器一个margin: auto？
浏览 0提问于2016-06-08得票数 0
1回答
我有一个特定尺寸的视口。目前，我只显示了在html5画布上绘制的单个图像。但现在我需要显示多个画布，范围从1-6。要求是根据画布的数量调整画布的大小，使其适合父div。
例如:单个canvas应该占父div的100%，2个canvas占50%-50%。因此，对于6个画布，它将是2行，每行3个画布。
此外，用户可以切换某些画布的显示/隐藏，以便他们必须重新排列。
我该怎么做呢？我使用的是angularjs、javascript和html5 css3。
浏览 0提问于2016-05-25得票数 0
我试图将溢出隐藏在一个标签中，该标签是深度嵌套的flex容器的子容器。下面是两个简单的片段来说明这个问题：
单容器(works):
#parent-flexbox {
display: flex;
width: 200px;
}
label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div id="parent-flexbox">
<label>long text that should be hidden because it
浏览 0提问于2018-03-30得票数 0
1回答
假设我有一个<ul>容器，它使用某个类进行样式设计。
它的相关风格是
.resipes_filter .resipes_filter-dish {
list-style: none;
margin: 0;
padding-left: 0;
}
dl, ol, ul {
margin-top: 0;
margin-bottom: 1rem;
}
*, ::after, ::before {
box-sizing: border-box;
}
在它中，我们有具有以下样式的<li>项：
display: inline-block
浏览 1提问于2019-03-30得票数 0
回答已采纳
2回答
我试图让我的导航栏与我的标志坐在平行，但我有困难这样做。
首先，当我输入图像的代码时，图像随后不会显示在页面顶部。
相反，它位于页面下方约40px处。我试过使用浮点数，但没有成功。
我已经创建了一个负值-20px的徽标，以坐在页面顶部更远，但想知道这是否是正常的做法在CSS
我试着看过youtube视频，但他们分享的代码似乎不适用于我的项目。我只是想知道图像对标题来说是不是太大了
浏览 28提问于2020-02-22得票数 1
1回答
引导断点-有问题
、、、
如果以前有人问过这个问题，我想首先道歉。我试着寻找答案，但什么也没有出现。我在编程方面仍然是个新手，并且在我的知识上遇到了障碍。我非常感谢任何直接的帮助，或者给我指明正确的方向。 我们在不同设备上的布局有问题。手机版网站看起来不错，桌面版也一样。然而，在768-799px之间，它会扭曲网站，然后在800-1300px，它会以另一种方式失真，看起来都不好。我已经通过并更改了所有@media查询，试图对其进行调整，但没有成功。我附上了两张我们正在经历的不同问题的照片。 提前谢谢你！ Tablet view 768-799px Over 800px
浏览 13提问于2019-03-06得票数 0
我试图让一个带有导航头和可滚动内容区域的柔性盒正确工作。我想要这样做的区域是包含其他元素的更大页面的一部分，因此我感兴趣的是将flex区域包装在父标记中，因此只有这两个元素才会受到影响。
我快到了！以下是我迄今为止所做的事情的小提琴：
演示完全具备我想要的功能，但是结构是关闭的，因为现在它似乎需要html, body风格。一旦我取消了HTML中打开和关闭flexArea标记的注释，并相应地更改了样式引用，我就失去了dbList上的百分比大小，该比例迫使它扩展到窗口的高度。
如何包装灵活的div，以便dbList保留我正在寻找的大小？
浏览 2提问于2015-10-08得票数 3
回答已采纳
1回答
所以我已经在这方面工作了更多的两个星期了，似乎无法使这一切按预期的方式进行。我开始认为，这可能是一个关于所讨论的行/列有多深的问题，但我真的很想了解一下外部的情况。
简而言之，它是包含-> 2行的页面，其中第二行包含-> 2列，其中第二行包含-> 3行为面包屑，每个页的主要内容和页脚。如果页面需要扩展，导航应该保持不变。我隐约记得，当我开始看到一些人试图做一个类似的布局，但没有能够再次找到这些帖子。
下面是正在讨论的代码，在我所能得到的表单中尽可能地简化它：
<!DOCTYPE html>
<html lang="en">
&l
浏览 0提问于2017-10-01得票数 1
1回答
我正在学习一些angularjs，并且我正在构建一个小项目。它主要连接到一个数据库并将一个表加载到网站，每一行代表一个项目(假设...)。
我用angularjs来做这件事，加载一个数组，将它编码成JSON并呈现它，但是- DIV似乎被切断了，只正确地显示第一行，并添加了一个滚动条。
我想让DIV根据我显示的元素的数量来显示。
这部分代码如下所示：
<div id="topContainer" ng-controller="projectController">
<h3>{{ projectsNum }} Live pro
浏览 1提问于2015-08-16得票数 1
2回答
我在工作中有一个很大的html项目，我只需要添加最后一点。我试图在我的页面上创建一个水平图标列表，但遇到了问题。这是一张我需要创建的图片。请给我指出正确的方向或发送一些代码来尝试。谢谢
浏览 6提问于2021-03-09得票数 0
我正在制作一个练习的网站，它有多个可扩展的部分，其中一些是并排的。我让手风琴正常工作，但所需的行为是当您单击按钮展开一个手风琴时，所有其他的保持关闭。目前，这在技术上是正确的，但在同一行中被单击的折叠面板旁边的任何部分都会将它们的div展开为与被单击折叠面板中的文本相同的大小。 这里有一个小提琴来展示我的意思：https://jsfiddle.net/jsfsmh/m5x08awc/1/，但你必须扩展结果窗口，以确保两个Div坐在一起，而不是在另一个的顶部。下面是手风琴的相关内联JavaScript： <script type="text/javascript">
浏览 17提问于2019-01-09得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
