如何设置图片并排的多个DIVs？
在前端开发中，可以使用CSS的flexbox布局或者grid布局来设置图片并排的多个DIVs。
- 使用flexbox布局：
- 首先，在父容器上设置
display: flex;，这将使子元素成为一个弹性容器。 - 然后，可以使用
flex-direction属性来设置子元素的排列方向，例如flex-direction: row;表示水平排列，flex-direction: column;表示垂直排列。 - 接下来，可以使用
flex属性来控制子元素的宽度和高度，例如flex: 1;表示子元素平均分配父容器的空间。 - 最后，将每个子元素设置为
display: flex;，以便在子元素内部进行进一步布局。 - 示例代码：
- 示例代码：
- 示例代码：
- 首先，在父容器上设置
- 使用grid布局：
- 首先，在父容器上设置
display: grid;，这将使子元素成为一个网格容器。 - 然后，可以使用
grid-template-columns属性来设置子元素的列宽，例如grid-template-columns: repeat(3, 1fr);表示平均分配3列的宽度。 - 接下来，可以使用
grid-gap属性来设置子元素之间的间距。 - 最后，将每个子元素设置为
display: grid;，以便在子元素内部进行进一步布局。 - 示例代码：
- 示例代码：
- 示例代码：
- 首先，在父容器上设置
以上是使用flexbox布局和grid布局来设置图片并排的多个DIVs的方法。这些布局方式在响应式设计和多设备适配方面具有优势，并且可以适用于各种应用场景。
腾讯云相关产品和产品介绍链接地址：
相关·内容
2回答
有没有人知道如何设置多个并排的div，这些div居中并且彼此之间至少有10个像素的间距？我设法做到了，但是下面的div正好在前2个下面。下面是我所期望的结果的例子：https://imgur.com/a/p1ilgCu 下面是我的结果：https://imgur.com/a/JI0beTk .container {
display
浏览 21提问于2021-08-21得票数 0
1回答
有没有人知道如何把两张长方形的图片合并成一张大图片？自然地跟踪边界，以便它们并排并且不会重叠……
这在如何裁剪图像并将其设置为另一个图像方面有一个很好的起点，但不是关于如何合并多个图像。
浏览 0提问于2012-05-30得票数 0
回答已采纳
4回答
这是我想要的。有很多单词，如test1，test2，test3，...并且它们中的每一个都与一个或多个示例相关联。我想要并排显示单词，并让示例显示当关联的单词被“点击”时，我写了如下(mouseover event)，但我意识到它在移动环境中不起作用。所以我需要改变我的计划。我希望操作在用户单击单词时发生。HTML<div class="divs">
<li>
浏览 7提问于2015-07-18得票数 0
一个小问题AAAAAAAAAAA BBBBBBBBBBBAAAAAAAAAAA我希望在两个DIV之间有一个1pix的实心边框，并且我希望这个边框具有最长DIV的高度(在我前面的例子中，高度是A，在这个例子中，高度是B)AAAAAAAAAAABBBBBBBBBBB BBBBBBBBBBB
我知道
浏览 21提问于2011-03-08得票数 2
回答已采纳
2回答
我的CSS有一个问题-我有两个divs "section1“和"section2”。我希望他们被并排显示，但他们被显示在图片中。有人知道如何并排展示它们吗？
浏览 2提问于2016-03-13得票数 1
回答已采纳
2回答
我有一个条目库( DIVS )在我的页面中浮动，我的主CSS文档允许三个DIVS在开始填充下一行之前并排出现(我已经在我的主CSS中定义了宽度)。现在，我正在尝试创建一个链接，允许五个DIVS并排出现。我已经创建了另一个CSS文档(我已经将它包含在主CSS下面)，它将不同的宽度应用于DIVS，并允许更多的文档并排出现。我要找的是一个JS函数，它允许我在3div和5
浏览 2提问于2012-07-16得票数 2
回答已采纳
3回答
用于多个Div的单背景
、、、、
是否有一种方法将一个图像(PNG或SVG)作为多个div的背景？请看下面的图片，它将如何工作。另外，当屏幕宽度变小，div排列在彼此下面时，是否也会有一种方法来改变背景以与之匹配呢？无背景的DIVs：
背景：
具有背景的DIVs：
浏览 3提问于2017-06-04得票数 1
回答已采纳
1回答
我似乎不能让我的图像并排排列，它们只是堆叠在一起。我只有足够的知识来摸索通过指令，我被困在这里。<img src='img.png' /> </div></div>
我似乎不能在这里得到其余的代码
浏览 1提问于2013-10-22得票数 0
我使用float将DIVs并排放置，但是当多余的DIVs形成第二行(行)时，就会出现问题。下一行是根据最后DIV的高度(不是最高的DIV)形成的。这样就形成了不完整的行。参见中的示例
在这里，我想把紫色和绿色的DIVs放在一行。但是紫色的DIV形成了一个不完整的行，因此，绿色的DIV转到了另一行。我想根据最高的DIV (即蓝色D
浏览 4提问于2011-12-03得票数 1
回答已采纳
我在一个响应式的设计中实现了一种工具栏。工具栏部分被实现为浮动DIVs，它们并排并排，在它们之间有很好的间隔。然而，在较低宽度的设备上，DIVs是垂直堆叠的，因为空间越来越少。这当然是件好事，但有一个小问题:它们相互堆叠在一起，没有垂直间隙，或者垂直间距是原来的两倍(我是在容器条上使用填充，还是在每个工具栏DIV部分使用空白)。这两个人看起来都不太好。DIVs可以具有动态宽度，我不知道它们将被堆叠在哪个容器宽度上，所
浏览 3提问于2015-06-17得票数 0
回答已采纳
我希望在其父DIV中并排对齐三个DIV，但如果三个DIV的总宽度超过父DIV的宽度，我希望三个DIV中的每一个都显示在另一个之上。三个DIVs中的每一个都有可变宽度的内容，尝试固定这些DIVs的宽度是没有意义的。我通常使用display:inline-block，但当父宽度可以容纳三个DIVs中的两个时，这并没有什么帮助。基本上，我有一组跨越多个页面的搜索结果。页
浏览 3提问于2019-03-26得票数 0
2回答
隐藏/显示时过宽
、、、、
其中一个包含DIV的显示设置为none。我有一个按钮，可以切换包含的div，这样我可以交替地隐藏/显示包含div，从而在其中显示两个div。内部DIVs设置为49%的宽度，左/右浮动。我遇到的问题是，第一次，可见的DIV被隐藏，而隐藏的显示，里面的两个DIV太宽了。如果我用鼠标调整浏览器的宽度，它们就是我想要的大小，任何时候我从这里开始切换可见性都是很好的。内两
浏览 5提问于2014-01-22得票数 0
回答已采纳
我希望每一双都能并排坐，如果它们可以放在同一条线上的话，否则我想让它们一只坐在另一条上。class="pair"> <div>Make me display:block when the container can't fit the divsside-by-side</div>
在不设置断点或使用JS的情况下，是否有办法使这些
浏览 3提问于2021-12-02得票数 0
回答已采纳
2回答
我正在尝试对齐多个图像或DIVs。我从wordpress获取内容。我发现 margin-left:0px;帮助我处理第一行，但接下来的行再次“中断”。如何将6张图片与^n张图片对齐？
浏览 2提问于2011-12-06得票数 0
我创建了一个灰色的框名为日记条目。正如您所看到的，从单词For开始的文本略低于数字1的级别。请建议我应该对代码做什么修改。我的代码：
<div style="background-color: #F0F0F0; display: table-cell; vertical-align: middle; border-radius
浏览 2提问于2013-10-28得票数 0
回答已采纳
3回答
简短版本完整版本
我所指的元素是图片下面的标题。由于有许多并排的图片，我不希望标题重叠或其他任何东西(它们绝对位于图片下方，具有固定的宽度和高度)。对于一个标题来说，居中看起来会更
浏览 2提问于2011-01-24得票数 1
回答已采纳
伙计们，我在这个设置中有三个divs：我不确定你们是否熟悉这个bootstrap css，但我应该试一下： <div class="span4">因此，位置是三个图表将彼此并排定位到顶部div，另外三个图表位于顶部div下方。
我的问题是，当我调整浏览器窗口的大小时，图形会垂直排列在一起，就像它们现在有了自己的容器一样。如何制作这些图形，保持它们
浏览 2提问于2014-03-25得票数 0
2回答
我正在使用引导来布局我的页面。在特定的屏幕宽度上，div会变得不对齐，因为其中一个div的标题很长，占用了另一行。
如果它旁边的div也有一个长标题(因此它们都占据2行)，那么divs将正确地对齐。我应该如何配置divs，这样无论标题是长的还是短的，divs仍然是对齐的，即对于这个屏幕width，我应该看到两个div的并排，而不是看到第三个div移到右边，第四个d
浏览 3提问于2016-08-29得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
