我使用Flexbox,但似乎有一个问题,当我尝试设置父div的高度/宽度为自动。
Flexbox指南,
.parent {
background: #000;
width:100px; /* I WANT TO SET THIS AUTO ** NOT FIX 100PX** */
height:100px; /* I WANT TO SET THIS AUTO ** NOT FIX 100PX** */
}
.child {
display: flex;
color:white;
flex-direction: column;
flex-wrap: wrap;
max-height: 50px;
list-style:none;
}
<div class="parent">
<div class="child">
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</div>
</div>
我也试试这个,
.parent {
background: #000;
flex:1;
}
但它只给一行子项上色,
根据子记录宽度设置父背景颜色存在问题,如何使用Flexbox设置自动宽度。
是否可以使用JavaScript找出宽度并设置父宽度?
请您建议最佳做法,按照分区的最大高度来安排项目。
以下是您需要解决的几个问题。根据您的风格,.child是flex容器,
>
我想你“.child”是一个容器弹性盒。如果您使用的是IE11,您可以“显示:-ms flexbox”工作(不显示:flex)(显示:flexbox在IE11中不起作用)
删除“最大高度:50px它限制容器盒(.child)的大小。您正在包含
现在,如果您试图让. zi的大小等于其元素的大小,那么您需要查看更多的边距: 0px和子元素的显示:内联块属性。
问题内容: 我的元素: 风格: 脚本,使其保持方形: 问题是要在纯CSS中做同样的事情。没有脚本。 问题答案: 我知道有两种技术可以根据元素的高度保持元素的长宽比: 当 高度相对于视口时 : 您可以使用vh单位: 对于 基于父元素的高度的高度 : 您可以使用具有所需纵横比的虚拟图像。宽高比为1:1的示例可以使用1 * 1透明.png图像,也可以使用@vlgalik注释为1 * 1 base64编码
我正在用flexbox做实验,并创建了这个布局。我试图让中间写着“嘿”的白色方框成为父方框的90%宽度/高度,但百分比似乎不会影响它。(我把它设置为100px/100px目前工作) 这很奇怪,因为父节点在检查时有一个定义的宽度/高度。 有人能告诉我如何实现吗?(此外,对我如何使用flexbox的一般批评也很赞赏) http://jsfiddle.net/yv3Lw5gy/1/ 相关类别:
问题内容: 我有一组元素,要求它们的最小宽度等于它们的高度,但是高度没有明确设置。目前,我可以通过jQuery 设置css 属性来实现此目的: 是否可以直接在CSS中指定此行为? 问题答案: 我不相信没有JS,这是不可能的,但是也许有人可以证明我错了? CSS不允许您使用动态变量,因此,如果在页面加载之前未设置高度,我不确定该怎么做。
问题内容: html CSS 我想在我将display:inline属性添加到css中后,立即以其原始高度和宽度(在css中设置)并排显示两个div,它似乎失去了先前定义的高度和宽度。[用#1和#2检查divs似乎松动了高度和宽度设置] 有人可以指出我似乎正在做的错误或此怪异行为的解决方法吗? 问题答案: 内联对象没有高度或宽度。为什么要先将它们设置为内联?您可能想要浮动它们或使用它们。
我想显示 3x3 大小的网格视图。我想根据设备大小设置高度和宽度。我从这个链接中获取参考。 主要活动- 活动_主要- 编辑- 就像首先得到屏幕高度和宽度,然后每个项目的高度和宽度是我得到的屏幕高度和宽度值的1/3。