如何并排创建4个div？
要并排创建4个div，可以使用CSS的flexbox布局或者grid布局来实现。
使用flexbox布局： HTML代码：
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>CSS代码：
.container {
display: flex;
}
.box {
flex: 1;
height: 100px;
background-color: #ccc;
margin: 10px;
}在上面的代码中，我们创建了一个容器（container）和四个盒子（box）。通过设置容器的display属性为flex，使其成为一个flex容器。然后，通过设置盒子的flex属性为1，使它们平均分配容器的宽度。通过设置margin属性来为盒子之间添加间距。
使用grid布局： HTML代码：
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>CSS代码：
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
.box {
height: 100px;
background-color: #ccc;
}在上面的代码中，我们创建了一个容器（container）和四个盒子（box）。通过设置容器的display属性为grid，使其成为一个grid容器。通过设置grid-template-columns属性为repeat(4, 1fr)，使容器分为4列，并且每列的宽度平均分配。通过设置grid-gap属性来为盒子之间添加间距。
以上是两种常用的方法来并排创建4个div，具体使用哪种方法取决于你的需求和布局要求。
相关·内容
2回答
如何在CSS网格项中垂直和水平地对文本进行居中？
html、css、css-grid
奇怪的是，CSS网格没有能够很容易做到这一点的属性(我在这里的代码：)。
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 20px;
align-items: center;
justify-content: center;
}
.container div {
background-color: gray;
height: 100px;
}
<div class="container"
浏览 6提问于2022-06-01得票数 0
回答已采纳
1回答
结合灵活启动和空间之间的外观。
html、css、flexbox
我有一个项目列表，我想显示与CSS。最初，它只是两项并排在一条线上，但现在我想让它响应大屏幕，所以我想让它显示在一行3项。我的旧代码看起来是这样的，它的内容是正确的:空格。它看起来很好，有一些奇数的项目要展示。
.flex-container-old{
margin-top: 50px;
background: magenta;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box-old{
width: 40%;
border: 1px solid black;
mar
浏览 0提问于2019-03-19得票数 4
回答已采纳
1回答
如何使这种响应性的网格布局？
html、css、flexbox
我认为会是一个简单的布局，结果证明我还无法完成。
我需要网格的响应和扩展，从一边到另一边(它必须与上面的文字和框对齐)。
我尝试了几种选择，为了更容易地检查，我把它们注释掉了：
.big-container {
padding: 0 20%;
}
.header {
width: 100%;
height: 50px;
background-color: blue;
}
.container {
border: 1px solid black;
/* display: flex;
flex-wrap: wrap;
*/
/* disp
浏览 0提问于2018-02-26得票数 1
回答已采纳
1回答
应该对盒子做些什么，使它符合308 be媒体宽度，从而使它响应。
html、css
应该对最小值为240 it或15 the的盒或卡进行处理，使其符合308 it媒体宽度以下的屏幕大小。它的网格布局和适应足够好，直到308 and。它失去了其在308px.Link中的响应性，如下所示。
在这方面请指导我。
.container-a{
margin:10px auto;
padding:0;
width: calc(100% - 6.25rem);
position:relative;
}
.wrapper{
height:100%;
display:grid;
grid-template-columns:repeat(5, 1fr);
gr
浏览 3提问于2022-09-05得票数 1
回答已采纳
6回答
如何在CSS网格布局中对齐三列？
html、css、css-grid
我正在尝试使用CSS中的网格布局在一个div (容器)中放置三个框。将只有一行。Box 1将靠近左侧，box3靠近右侧，box2位于中间。另外，所有的盒子都应该垂直地放在中间。 ? 这是我的代码，但我不能按照我所描述的方式来实现它。 .statusBar{
border: 1px solid #999;
display: grid;
grid-template-columns: 50px 1fr 50px 1fr 50px;
grid-column-gap: auto;
}
.statusBar > div{
border: 1px solid #000
浏览 132提问于2019-10-15得票数 1
回答已采纳
2回答
使网格响应
html、css
知道如何使这个网格响应吗？
这是我的CSS：
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 100px 100px 100px;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font
浏览 0提问于2019-06-11得票数 2
1回答
使用FlexBox (或其他css)，是否可以在每行中具有不同数量的相同大小的列(即，而不使用空的div)？
html、css、layout、flexbox、grid
我特别寻找一个2行的网格- row1有2列，row2有3列，其中每列/行(网格中的ie.item)大小相等。它可以使用空的div，但显然这不是首选的解决方案……
我已经包含了一些基本的html / css示例来说明我的意思，但我希望在不使用空div的情况下实现类似的功能。
CSS
html, body {
height: 100%;
margin: 0;
}
.grid {
min-height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.grid > div {
displ
浏览 4提问于2018-07-24得票数 4
回答已采纳
2回答
Flexbox中的CSS网格不能像预期的那样只在Chrome上工作
html、css、flexbox、css-grid
我正在尝试创建一个包含标题和2x2CSS网格的柔性盒。
柔性盒(.container)填充整个视图。
标题的高度是可变的。当页面打开时，它可能会动态变化。
网格中的四个单元格必须占据视图的其余部分，并且它们必须具有相同的宽度和高度。
我现在拥有的是：
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
* { box-sizing: border-box; }
.container {
height: 100%;
display: flex;
flex-direction: column;
浏览 0提问于2018-10-04得票数 12
回答已采纳
1回答
嵌套柔性盒和CSS网格布局中的空间分布问题
html、css、flexbox、css-grid
据我所知，我的aside元素和div.content应该占用div.container中可用空间的一半。此外，div.content中的网格应该占用所有可用的垂直空间。
问题是网格项无法获得任何高度(如果不是硬编码的话)。此外，网格所占用的所有垂直空间(因为grid-gap)都来自aside元素和div.content，这意味着div.content窃取了aside的垂直空间，这两个元素不再是相同的高度。
aside的高度等于div.content的高度减去网格的高度。
总之，禁止使用柔性箱为div.content设定高度。添加到div.content中的子元素的行为更像它的兄弟类。
*
浏览 0提问于2019-05-11得票数 1
回答已采纳
1回答
跨度为2列2行的Flexbox单元格
html、css、flexbox、css-grid
我想知道这是不是只用flexbox就能做到，或者我是否也需要加入网格功能。我正在尝试让特定的单元格跨越多行和多列。在我的特殊情况下，它只是第一个盒子需要跨度与下面的两个盒子相同的宽度和右边的两个盒子相同的高度。
这是我第一次尝试的代码，我理解为什么它不能工作。只是想知道有没有办法做到这一点：
#container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.box {
flex-grow: 0;
flex-shrink: 1;
浏览 0提问于2018-04-25得票数 5
2回答
网格-自动流:列不能用百分比值捕获子div宽度
css、css-grid
我想使用CSS网格属性将行和一些跨标记水平地、灵活地放置在下面的捕获中。
实际上，最简单的方法是使用带有gap属性的CSS flex属性，但旧的ios版本不能允许gap属性。
所以我使用了grid-auto-flow: column;，但是由于这个属性，子标记的宽度不能很好地工作。
import styled from "styled-components";
export const Container = styled.div`
width: 375px;
display: grid;
/* grid-template-columns: repeat
浏览 1提问于2022-06-14得票数 2
回答已采纳
2回答
没有定义列的纯CSS砖石布局
css、flexbox、masonry
我按照上面的描述写了一个布局。我通过简单地使用具有不同宽度和高度的display: inline-block和article元素实现了这一点，如下所示：
width: 50%; /* this is variable*/
height: 160px; /* this is also variable*/
padding: 10px;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
现在这已经很好用了，但是:你看到4和5上面的空隙了吗？我是否可以编写一个纯CSS布局，让这些框直接填充1下面的空间？
浏览 0提问于2018-06-23得票数 1
3回答
垂直显示Div行问题
html、css
我在移动视图中垂直显示我的三个div框时遇到了一点小问题。在桌面/平板电脑视图中，我希望它们在一行中保留为三个div，而在移动视图中，我更希望本质上是每行一个div。 在.container (在桌面视图的三个导航部分(最后一部分)中)，我有display:flex，在移动视图中，我将其设置为display: block，这是我认为可以工作的。如有任何建议，我们将不胜感激。 /* 36em = 577px*/
@media (max-width: 577px) {
#three-nav-section {
margin-left: 2%;
margin-right:
浏览 28提问于2021-01-29得票数 0
4回答
如何在CSS网格布局中指定行高？
html、css、grid-layout、css-grid
我有一个CSS布局，在这个布局中，我想使中的一些(中间3)行延伸到它们的最大大小。我可能正在寻找一个类似于flex-grow: 1对Flexbox所做的属性，但我似乎找不到解决方案。
注意:这是专为应用程序设计的，所以浏览器兼容性并不是一个真正的问题。
我有以下CSS网格布局：
.grid {
display: grid;
grid-template-columns: 1fr 1.5fr 1fr;
grid-gap: 10px;
height: calc(100vh - 10px);
}
.grid .box {
background-color: grey;
浏览 0提问于2017-01-29得票数 88
回答已采纳
1回答
我的容器布局有问题，原因是它通过了我的容器的最大宽度--80 grid -我无法想象如何解决这个问题，在我的另一个网格布局中，我没有这个问题，就在上次，我的问题是在移动设备上。
示例：
代码：
<Container>
<NewsWrapper>
<CardTop>
<div className="Bg" />
<div className="headerH3">
<h3>
浏览 4提问于2020-02-09得票数 0
回答已采纳
2回答
如何将内容放入布局
javascript、html、css
我从为我的网页创建了一个布局。
但是我想删除那些框中间的文本。我尝试了一些东西，但不幸的是没有起作用。
html, body { margin: 15; height: 100% }
.grid-container * { }
.grid-container div:after {
content: attr(class);
color: #888;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-co
浏览 0提问于2018-09-12得票数 0
2回答
删除网格项时关闭网格布局中的空白
html、css、css-grid
是否有一种方法来使用网格布局与网格间隙和缺失的网格-区域，而不留下额外的空白布局。
.main {
display: grid;
grid-template-columns: 1fr 1fr;
width: 500px;
}
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: 'a' 'b' 'c' 'd';
width: 200px;
grid-gap: 10px;
}
.a, .b, .
浏览 0提问于2018-06-25得票数 2
回答已采纳
2回答
如何停止在网格显示上覆盖柔性显示？
html、css、flexbox、css-grid
我的目标是创建一个布局，最初具有网格显示，并为其中的每个直接子元素创建一个灵活的显示，使其能够完美地对其中的项目进行对齐，到目前为止，它一直在工作，直到我给了一个.wrapper(第一个父母)的孩子(.nested)一些孩子，然后我给了.nested display: grid;；但是出于某种原因，.nested的display: grid被省略了，并且没有使用grid-auto-rows: 100px属性，这就是我的问题。
我到处找办法，但找不到，有人能帮我解决这个问题吗？
*{
padding: 0;
margin: 0;
-webkit-box-sizing:
浏览 5提问于2021-01-11得票数 0
回答已采纳
2回答
如何将网格包装器放置在flex容器下？
html、css、flexbox、css-grid
我试图对所有的布局(其中一个在另一个下)创建一个“示例页面”，如何将网格包装器放置在一个flex容器下，而不是显示在同一行中？如果我删除了display: flex，它就会自动运行，但是flex保持在同一行中。
为什么它们都有相同的鲑鱼背景颜色？
谢谢。
.flex-wrapper {
display: flex;
border: 5px solid rgb(0, 0, 0);
}
.flex-wrapper>div {
padding: 20px;
margin: 5px;
background-color: salmon;
}
/* grid
浏览 6提问于2022-09-22得票数 1
1回答
如何设置css网格列的最大宽度
html、css、css-grid
我有一个css网格，当有很多项目时，它看起来和工作起来很棒。然而，当有1个、2个或3个项目时，卡片就会被拉长。
我尝试为每张卡设置max-width，但列的宽度保持不变。有没有办法设置每一列的max-width？只有当有3列或更少的时候我才需要使用它。(我是css网格的新手)
.big-container {
padding: 0 10%;
}
.header {
width: 100%;
height: 50px;
background-color: blue;
}
.container {
border: 1px solid black;
display: g
浏览 0提问于2018-03-03得票数 8
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
