防止子元素填满可用空间flexbox
是一种用于页面布局的CSS属性和属性值组合，用于控制父元素和子元素之间的空间分配和对齐方式。它可以帮助开发者创建灵活和响应式的布局，适用于不同屏幕尺寸和设备。
Flexbox是一种一维布局模型，有父元素（flex container）和子元素（flex items）组成。通过设置flex container的属性，可以控制子元素的布局行为。
Flexbox的一些常见属性包括：
display: flex：将元素设置为flex容器，使其子元素成为flex项。flex-direction：指定flex项在容器中的排列方向，可以是row（水平排列，默认值）、row-reverse（水平逆序排列）、column（垂直排列）、column-reverse（垂直逆序排列）。justify-content：指定flex项在容器主轴上的对齐方式，可以是flex-start（左对齐，默认值）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，项目之间间隔相等）、space-around（项目两侧的间隔相等，项目与项目之间的间隔是相邻两侧间隔的两倍）。align-items：指定flex项在容器交叉轴上的对齐方式，可以是flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、baseline（基线对齐，即各项的基线对齐）、stretch（拉伸填满，默认值）。flex-grow：指定flex项的放大比例，用于占据多余空间，默认值为0，即不放大。flex-shrink：指定flex项的缩小比例，用于收缩空间，默认值为1，即自动缩小。flex-basis：指定flex项的基准值，即初始大小，默认值为auto，即根据内容自动计算大小。flex：是flex-grow、flex-shrink、flex-basis的缩写形式，可以一次性设置这三个属性的值。
Flexbox的优势包括：
- 简化布局：Flexbox提供了灵活的布局方式，可以更简单地实现各种复杂布局，减少开发者的工作量。
- 响应式布局：Flexbox可以自动调整子元素的大小和位置，适应不同的屏幕尺寸和设备。
- 自适应空间分配：Flexbox可以根据子元素的内容和设置自动分配空间，确保最佳的布局效果。
- 对齐和对称：Flexbox提供了灵活的对齐方式，可以轻松实现元素的居中、两端对齐等效果。
防止子元素填满可用空间flexbox可以应用于各种场景，例如：
- 导航菜单：使用Flexbox可以快速实现水平或垂直排列的导航菜单，并控制菜单项的对齐方式。
- 图片库展示：使用Flexbox可以创建一个自适应的图片库，图片按照一定的比例排列并且保持等间距。
- 表单布局：使用Flexbox可以轻松实现表单元素的布局，确保表单在不同设备上的一致性和美观性。
- 横向滚动条：使用Flexbox可以实现横向滚动条，方便在容器内部横向滚动大量内容。
- 瀑布流布局：使用Flexbox可以实现瀑布流布局，即将不同高度的项自动排列，达到流畅的展示效果。
推荐的腾讯云相关产品：腾讯云云服务器（Elastic Cloud Server，ECS），腾讯云对象存储（Tencent Cloud Object Storage，COS）。
腾讯云云服务器（ECS）是一种灵活可扩展的云服务器，可以根据实际需求选择配置，提供高性能和稳定的计算资源。了解更多关于腾讯云云服务器的信息，可以访问腾讯云云服务器产品介绍。
腾讯云对象存储（COS）是一种安全、可靠、低成本的云存储服务，适用于存储各种类型的数据和文件。了解更多关于腾讯云对象存储的信息，可以访问腾讯云对象存储产品介绍。
相关·内容
1回答
叶贴图未填充整个包装器div
、、、、
当涉及到HTML/bootstraps等时，我有一点新手。我遇到了一个问题，div (一个叶映射)没有完全填满包装器div。基本上，我有一个侧边栏，可以切换和关闭，以及地图本身。 下面是我的基本HTML结构： <div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Genre</h3>
浏览 15提问于2019-10-04得票数 0
我仍然无法掌握flexbox的诀窍:| 我正在尝试创建一个5x5的正方形网格，我希望每个正方形都是50px x 50px，但我想不出来。html是基本的： #grid {
display: flex;
}
.grid-item {
flex: 1 0 17%;
height: 50px;
} <div id="grid">
<div class="grid-item">Something</div>
<div class="grid-item">Something<
浏览 25提问于2021-09-14得票数 0
回答已采纳
2回答
我试图了解display:flex是如何工作的，但是每当我设置它时，childs就不会占用整个宽度。我原以为这三个div会有33%的屏幕宽度。我做错了什么？
.flexbox {
display: flex;
}
.flexbox div {
border: 1px solid black;
padding: 10px;
}
<div class="flexbox">
<div>One</div>
<div>Two</div>
<div>Three</div>
&l
浏览 1提问于2018-02-23得票数 3
回答已采纳
我遇到了一个关于flexbox的问题。
我有一个最大宽度为920px的div。我希望内容框填满div从左到右到最大可能的宽度，所有内容都有相等的边距。当屏幕尺寸减小到每行一个框时，我希望该框在屏幕上居中。
下面是实际运行的站点：
如果我使用：
justify-content: center;
然后这些盒子就不会填满最大宽度。
如果我使用：
justify-content: space-between;
然后，当我下降到每行一个盒子时，盒子不会居中。
我怎样才能在这两者之间达到一个满意的平衡呢？即填满容器的最大宽度，并保持所有内容居中？
浏览 2提问于2014-03-06得票数 50
2回答
我正在为我的网站构建一个侧边栏，并试图使它成为页面的其他高度后的元素。不过，我想不出怎么做。我正在使用引导程序4，但是问题可能在我的CSS中，我现在就会发布。
.sidebar {
float: left;
width: 300px;
height: 100%;
background-color: #212529;
}
.wrapper {
display: flex;
width: 100%;
height: 100%;
margin-top: -50px;
margin-bottom: -30px;
}
#sideb
浏览 1提问于2018-11-24得票数 0
回答已采纳
我有一个设置为480px高的父div。它有两个孩子，每个孩子都有动态填充AJAX的内容，所以我不知道他们最终会有多高。最上面的孩子充当标题，我需要所有的信息来显示，但是第二个孩子只有一个很长的列表，它将会溢出: auto；。有没有办法让第二个孩子只填满第一个孩子没有使用的剩余空间？
<div id = "parent">
<div id = "child1" >
<h2>Header</h2>
<p>Paragraph. I don't know ho l
浏览 0提问于2015-05-20得票数 0
1回答
当我缩小窗口的大小时，按钮之间的页边距保持在相同的百分比，但我希望减少按钮1的左边距，因为浏览器会大大减少button4的右边距。因此，我们的目标是使按钮响应地定位在900 at和更大的位置。
HTML代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta
浏览 0提问于2017-02-09得票数 0
回答已采纳
1回答
我将这些框与css grid对齐，如下所示，并在JSfiddle中。
容器基本上包装了我的网站的内容，在本例中是网格。它完全按照我想要的方式工作。然而，我只是注意到在iOS 10.2中不支持网格。
你能提供一个兼容性更好的替代方案吗？当然，我自己也尝试过，但我只成功地使用了grid。
html {
font-size: 62.5%;
}
.container {
position: relative;
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
box-sizing: bor
浏览 1提问于2018-09-23得票数 0
1回答
我遇到了一个flexbox列的问题，因为flex d元素的子元素不会以百分比形式响应height。我只在Chrome中检查过这个，据我所知这只是一个Chrome的问题。下面是我的例子：
HTML
<div class='flexbox'>
<div class='flex'>
<div class='flex-child'></div>
</div>
<div class='static'></div>
</div>
浏览 0提问于2014-01-07得票数 91
回答已采纳
3回答
我正在尝试ItemsControl(ListBox)中购物车的内容。为此，我创建了以下DataTemplate
<DataTemplate x:Key="Templates.ShoppingCartProduct"
DataType="{x:Type viewModel:ProductViewModel}">
<DockPanel HorizontalAlignment="Stretch">
<TextBlock DockPanel.Dock="Left&#
浏览 0提问于2009-07-03得票数 24
回答已采纳
3回答
我正在尝试做一个网格插入符号，插入符号将在顶部和底部，当用户在两边悬停时会有一个灰色区域。
<div class="control-wrap">
<div class="caret-wrap">
<span class="caret">▲</span>
</div>
<div class="caret-wrap">
<span class="caret">▼</span>
</di
浏览 0提问于2018-03-27得票数 0
我在一个网站上工作，它有一个标题，在整个页面上延伸，就像这个和其他SE网站的标题栏。在不同的分辨率和浏览器大小上测试我的CSS时，我注意到只有当浏览器小于页面大小时，元素才会填满用户的浏览器。例如，如果浏览器窗口的宽度小于960px (我的网站的主容器的宽度)，并且出现水平滚动条，则标题将只填充当前屏幕上的空间，而不会延伸到可通过滚动条访问的页面的其余部分。
我发现我不是唯一一个有这个问题的人: StackOverflow和其他SE站点也有同样的问题。
我能做些什么来解决这个问题呢？
浏览 0提问于2012-02-25得票数 0
回答已采纳
我正在生成一个PDF，并且内容是动态的。内容可能跨越两个页面，当它这样做时，页脚就会与内容重叠。 我决定尝试使用以下方法 @page
{
margin-bottom: 150px;
} 这会将包括页脚在内的所有页面内容推高150px。我想知道是否有一种方法可以让页脚容器不受这个底部边距的影响。 我基本上想让页脚填补页面底部150px的空白。如果我不使用这个页边距，页脚只会覆盖页面内容，然后流到下一个页面，这就是问题所在。 ? 灰色条是页脚，正如您所看到的，文本与其重叠。此屏幕截图还应用了页边距-底部，因此我想将页脚向下移动以填补该空白。
浏览 23提问于2021-06-14得票数 0
1回答
我试图用GTK+2编写一个接口，但我找不到一种方法来确保切换按钮和进度条不会试图填满整个空间。
我的界面有一张图片，另一边还有一堆进度条和按钮。如果它们的数量足以使整个vbox比图片本身更高，那么一切都很好：
然而，当它们不够的时候，它们会垂直拉伸，这使它们看起来不对：
我找不到任何方法来确保这种情况不会发生，我在与设置这些小部件的高度有关的文档中发现的唯一一件事就是设置它们的最小高度。我正在寻找一种方法来确保这些小部件不会占用它们所能占用的所有空间。
我的代码是。我不能包含我在这里使用的占位符映像，但是它只是一个128x128占位符，如果需要的话可以很容易地替换。
浏览 4提问于2017-08-28得票数 0
回答已采纳
1回答
我有一个导航栏与左边角的标志和一些页面的标志和页面链接都在不同的div。我想让名为navbar的div在调整窗口大小时响应，我只想改变窗口的宽度。 我的代码： <div class="top">
<div class="logo">
<a href="localhost:8080"><img class = "logo" src="@\assets\logo.svg" alt="site logo"></a>
浏览 14提问于2021-10-01得票数 0
1回答
不幸的是，我不得不使我的网站代码与Internet Explorer 10兼容，即使在阅读了他们官方网站上的文档后，我也遇到了一些问题
下面是我的css代码：
.uberflex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
display: -webkit-flex;
-webkit-flex-flow: column wrap;
-webkit-ju
浏览 2提问于2013-09-10得票数 13
回答已采纳
(新加入WPF)我正在查看WPF示例：
<Window x:Class="Attempt_XAML.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel>
<Label HorizontalAlignment="Cen
浏览 3提问于2014-01-30得票数 5
回答已采纳
使用仅、父div和子img元素，如下所示，如何垂直和水平地对img元素进行居中，而显式地不定义父div的height
<div class="do_not_define_height">
<img alt="No, he'll be an engineer." src="theknack.png" />
</div>
我对柔性盒不太熟悉，所以如果柔性盒本身能填满整个高度，而不是任何其他不相关的属性，我就没问题了。
浏览 1提问于2014-09-14得票数 65
回答已采纳
我很困惑。我刚刚发现了CSS的属性：，我不明白它给CSS带来了什么，这是display: block，inline，inline-block所不能做到的。
有谁能给我点启发吗？提前谢谢。
浏览 0提问于2012-04-21得票数 4
我有一个有多个页面的TabControl。在一个页面上，我只有一个标签，我想让它填满页面并在必要时滚动。尽管尝试了所有锚和船坞的组合，但标签不会滚动。我已经将页面的AutoScroll属性设置为true，但没有成功。我看过关于使用ScrollBar和手动处理滚动的文章，但看起来有点粗糙。这是真的吗？
浏览 0提问于2009-06-19得票数 0
回答已采纳
2回答
我有一个简单的柔性箱方案-父母，少数项目等。
我需要有选择地隐藏其中一个子项，这是我使用display: none所做的。
但是，在以后的某个时候，我需要恢复项目的可见性-但是作为什么？我不是flex，我也不认为它是inline-flex，所以它是什么？
我不能使用display: unset，因为它似乎只有适度的支持。有什么想法吗？
.container {
margin: 40px;
}
.flexbox-container {
display: flex;
}
.flexbox-item {
flex: 1 0 0;
height: 40px;
backgro
浏览 1提问于2019-05-30得票数 1
回答已采纳
假设我有一些像这样的<span>元素，元素之间没有空格：
<span>aaaaaaaaaa</span><span>bbbbbbbbbb</span><span>cccccccccc</span>
当在浏览器中呈现，并且是水平“压缩”时，我希望文本只在元素之间包装。因此，只应允许前两个例子：
1.✔无包装：
aaaaaaaaaabbbbbbbbbbcccccccccc
2.只使用✔元素的包装：
aaaaaaaaaa
bbbbbbbbbb
cccccccccc
3.❌字符包装(这不能允许)：
aaaaaaaa
a
浏览 0提问于2019-01-24得票数 1
回答已采纳
1回答
我有一个原始网格和p-col，基于中提供的示例
我将数据放在每一行中，而不是中所示的同一行中
我的HTML
<h5>Basic</h5>
<div class="p-grid">
<div class="p-col">
<div class="box">1</div>
</div>
<div class="p-col">
<div class="box">
浏览 0提问于2020-11-29得票数 0
5回答
基本上，我得到了一个由1+ div子元素(每个元素中都有一个按钮)组成的div父元素。现在，我想让按钮填满父对象的整个宽度--但要共享它。也就是说，如果有一个子按钮，它应该填满100% -如果有两个，它们的宽度应该是每个按钮大小的50%，等等。
我该怎么做呢？
编辑:按要求-这里是代码(尽管我认为上面的解释更好)：
.buttons
{
background: #f1f1f1;
border-top: 1px solid #ddd;
padding: 15px;
height: 34px;
}
.submitbutton
{
width: inheri
浏览 0提问于2013-08-21得票数 0
CodenPen link <body>
<container>
<nav></nav>
<main>
<section></section>
<section></section>
<section></section>
<section></section>
...
</main>
<footer></foot
浏览 21提问于2019-12-15得票数 0
回答已采纳
1回答
我有一堆表在图片中。
该块具有以下css
.block {
float: left;
width: 50%;
}
而且它们都被包装在一个包装中
<div class="wrapper">
<div ng-show="condition1" class="block"></div>
<div ng-show="condition2" class="block"></div>
<div ng-show="c
浏览 3提问于2017-02-09得票数 3
回答已采纳
2回答
我只是在做一些HTML的实验，我想知道为什么第二行没有填满剩余的空间。为什么桌子没有垂直伸展？
<table width="100%" border="1" height="100%">
<tr>
<td align=center>Line 1
</td>
</tr>
<tr height="90%" >
<td>Line 2
</td>
</tr>
</
浏览 3提问于2013-08-20得票数 0
1回答
我不知道如何将td宽度扩展到容器大小之外。要明白我的意思，请看 jsFiddle。
一旦表格填满了容器的宽度，我就不能使单元格变宽了。如果我需要在页面加载之后进行操作，那么我将如何处理呢？
我不真的想调整包含div的大小。
浏览 1提问于2011-06-30得票数 1
回答已采纳
5回答
我已经将我的页脚DIV固定在视口的底部，如下所示：
#Footer
{
position: fixed;
bottom: 0;
}
如果页面上没有太多内容，这种方法效果很好。但是，如果内容填满了整个页面的高度(即垂直滚动条是可见的)，页脚会与内容重叠，这是我不会做的。
如何才能使页脚位于视区的底部，而不会与内容重叠？
浏览 1提问于2010-04-30得票数 27
我有这个网格：
如果我将表格宽度从100%改为auto，表格将水平折叠。
这是不可取的。如何让表列(td元素)自动缩小以适合其内容，同时，table和tr元素会填满其父元素的整个空间？
浏览 2提问于2011-07-12得票数 4
回答已采纳
2回答
为什么红色部分不占用100%的高度，我的意思是为什么红色部分占100‘t的100%，而不是100’t 10‘t 40’t(黑色和蓝色的高度)。
.black {
height: 10px;
background-color: black;
}
.red {
height: 100%;
background-color: red;
}
.blue {
height: 40px;
background-color: blue;
}
body {
height: 100vh;
margin: 0;
padding: 0;
}
<body>
浏览 9提问于2022-07-24得票数 0
正如标题说的，我正在处理圣杯布局使用灵活框，在一个自我节奏的自学课程，出于某种原因，我不明白为什么我的侧边栏没有一直延伸到页脚。这是我的代码-
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=
浏览 3提问于2022-04-30得票数 0
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
我有一个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
回答已采纳
1回答
我正在准备WPF平台中的自定义控件，在该控件中，我使用内容演示程序显示视图，并试图使用文本块控件在内容演示器内容上显示文本。对于文本块中的给定文本，我尝试使用文本块控件的测量方法来计算文本块的实际宽度和实际高度，但它没有为文本块控件提供实际的宽度和高度。这样，文本块控件就不会在视图中显示。代码片段如下所示：this.CustomTextBlock.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
有人能向我建议如何计算WPF平台上控件的实际宽度和实际高度，并向我解释为什么WPF平台中的控件不提供实际宽度和实
浏览 22提问于2020-05-29得票数 0
回答已采纳
我想调整主页等与标志，但我认为徽标占据了所有的空间顶部的菜单标题，我不知道如何减少它，我已经尝试了边距-左或右，也填充，但它没有帮助。我还想知道是否有负面的CSS规则是一种不好的做法，或者到目前为止我的代码中是否有任何不好的做法。对不起，我英语不好，我不是本地人。
<!DOCTYPE html>
<html>
<head>
<title>Heloisa Antoniely │ Makeup</title>
<link rel="stylesheet" type="text/c
浏览 1提问于2021-07-20得票数 0
回答已采纳
1回答
我有一个左右的flexbox：
.wrapper {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%;
height: 70vh;
min-height: 325px;
max-height:570px;
}
<div class="wrapper">
<div class="left">Left</div>
<div class="right">Right<
浏览 1提问于2015-04-06得票数 196
2回答
将规则flex: 1设置为多个本地组件的确切目的是什么？
我经常看到这些规则适用于不同的组件。有时候这个规则显然是多余的。有时没有明显的，但布局似乎很好没有它。
那么，这个规则到底应该做什么呢？
浏览 2提问于2016-03-14得票数 5
回答已采纳
可能是一个简单的问题..我有一个容器。该容器有X行数。在高度方向上，行应该完全填满容器。行不应该扩展到容器外部。我不想手动设置行的高度。
如果我将class="h-100"设置为行，第一行采用容器的完整高度，其他行在容器外部渲染……我认为父元素的高度会为内部元素设置高度约束...
我觉得这应该很简单，但我似乎找不到正确的类/样式组合。
<html lang="en" style="
height: 100%;
"><head>
<!-- Required meta tags -->
&l
浏览 1提问于2020-08-07得票数 1
1回答
我有一个页面，我希望页面宽度根据浏览器进行调整。我想，如果启动一个容器，例如名为“div”的容器，我将整个页面放在其中，并告诉div用width: 100%;完全填满浏览器的宽度，那么它就会全部调整大小。但事实并非如此，即使页面在div中，它也不包含页面。
<header>
<div id="header">
<table width="100%" border="0">
...
</table>
</div>
</header>
浏览 3提问于2014-01-21得票数 0
我有一个问题，我似乎不能将div一直扩展到底部。我在stackoverflow上找到了一些相关的主题，并尝试了一下，但它并不能100%地工作，它总是会创建一个滚动条。
我正在使用Twitter Bootstrap来完成我的项目btw。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Divespotter</title>
<meta name="v
浏览 0提问于2013-05-15得票数 0
回答已采纳
1回答
我有文本和双线垂直线，我想让它们在任何时候都对齐。
行下有文本("2016")，但现在，当调整窗口大小时，文本会略为滑动。
当您调整窗口的大小时，它会更清晰地显示出来，这样布局就会稍微改变一点，文本和行就会对齐到右边。
下面是演示：。
.verticalLine:before {
content: "";
display: block;
position: absolute;
border-left: 0.13em solid #B9D7D9;
border-right: 0.13em solid #B9D7D9;
height: 1
浏览 6提问于2016-09-15得票数 0
回答已采纳
我希望根据div元素的容器宽度，相应地设置其宽度。然而，数字将被改变，因此宽度将需要相应地调整。这里有一个CSSDeck链接，可以清楚地解释情况：
正如您所看到的，这两个容器是相同的(需要的)，它们也有模块化的内容(<div>元素)(这也是必需的)。保持相同的结构，是否可以使用CSS自动调整div的宽度，使其填满整个容器？
然后，第一个容器中的每个项目将有33.333%的宽度，而第二个容器中的每个项目将有20%的宽度。
浏览 3提问于2013-11-03得票数 0
回答已采纳
我有一个简单的比赛：
.mainGrid {
display: grid;
grid:
'filterstatus filterowner filtersearch filterbutton' 1fr /
1fr 1fr 3fr 90px;
column-gap: 1em;
}
当过滤器所有者从DOM中删除时，显示中当然会出现一个很大的漏洞。
在CSS中，我可以说“当过滤器所有者被隐藏时，不要留下很大的漏洞，在其他人之间展开空间”。
浏览 5提问于2020-09-17得票数 2
1回答
我想在VB6中创建一个类似于以下内容的xml文档：
<?xml version="1.0"?>
<AKU_BA_GETMEDBAL_REQUEST xmlns="http://xmlns.aku.edu/ps/sas/schemas/AKU_BA_GETMEDBAL_REQUEST.V1">
<AKU_BA_MRNO>255-30-98</AKU_BA_MRNO>
<AKU_BA_SYS_LOCATION>"karachi"</AKU_BA_SYS_LOCATION&g
浏览 4提问于2016-03-18得票数 2
回答已采纳
2回答
我试着制作带有背景的侧边栏，它的高度与#页面内容的高度相同，但我无法使它工作。边栏高度仍与其内容相同。
下面是css代码：
.flexbox {
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: flex !important;
overflow: hidden !important;
}
.flexbox .flexbox-col {
flex: 1;
}
<div id="mainWrapper" class="ma
浏览 1提问于2015-03-22得票数 2
我有许多用PHP生成的divs，我希望divs的宽度是均匀的(即2= 50%，3= 33%，4= 25%，等等)，而不管有多少divs。
我想用CSS来做这个，有可能吗？
.container {
margin: 10px 0;
width: 100%;
}
.container div {
height: 50px;
}
.container div:nth-child(odd) {
background-color: red;
}
.container div:nth-child(even) {
background-color: blue;
}
.twoColum
浏览 2提问于2016-08-18得票数 2
回答已采纳
2回答
我想均匀地浮动3个div(或者更一般地说)。我正在建立一个响应式的主题(类)，我希望具体的项目来调整相应的宽度根据可用的。
现在，是的，我可以从随机的屏幕测量开始，计算“断点”(我通常会做的事情)，但是有了这么多的设备，我试图看看我是否可以用一种更智能的方式来做一些真正灵活的东西，对我来说，这将是一些更自动的东西。就像当一个人甚至与margin 0px auto;等对齐时……
举个例子。如果我有1000px宽的父div，以及我想要浮动的div1，div2，div3，div4，比如说，240px宽，以及“偶数”间距，id可能会这样做。
div1{ float:left; max-width:XX
浏览 1提问于2013-02-23得票数 1
2回答
我试图在每种分辨率下为每个div划分相等的宽度，但是对于div，max-width不应该大于138px？
但是当分辨率改变时，li终于变宽了，即不等于其他div，ul行周围的空间分布不均匀，还剩下一些空间吗？
如何解决这个问题？有什么办法吗？
.css
.flex-container {
display: flex;
background-color: #f1f1f1;
flex-wrap: wrap;
}
.flex-container > li{
background-color: DodgerBlue;
浏览 0提问于2019-01-30得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
