blocks|key|1583245|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1583246|.folders{
++height:+150px;
++display:+flex;
++flex-direction:+row;
++flex-wrap:+wrap;
++justify-content:+space-between;
++align-content:+space-around;
++text-align:+center;
++background-color:+#efefef;
}

.folder+{
++flex-basis:+30%25;
++flex-shrink:+0;
++padding:+10px+0;
++background-color:+#1abc9c;
}|code-block|syntax|javascript|1583247|<div+class="folders">
++<div+class="folder">1</div>
++<div+class="folder">2</div>
++<div+class="folder">3</div>
++<div+class="folder">4</div>
++<div+class="folder">5</div>
++<div+class="folder">6</div>
</div>|1583248|1583249|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.folders{
  height: 150px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-around;
  text-align: center;
  background-color: #efefef;
}

.folder {
  flex-basis: 30%;
  flex-shrink: 0;
  padding: 10px 0;
  background-color: #1abc9c;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="folders"&gt;
  &lt;div class="folder"&gt;1&lt;/div&gt;
  &lt;div class="folder"&gt;2&lt;/div&gt;
  &lt;div class="folder"&gt;3&lt;/div&gt;
  &lt;div class="folder"&gt;4&lt;/div&gt;
  &lt;div class="folder"&gt;5&lt;/div&gt;
  &lt;div class="folder"&gt;6&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1636357|text|看起来你有两个问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1636358|，|1636359|，根据你的描述，你的百分比是没有任何意义的。它们应该是1/3的宽度和1/2的高度。|ordered-list-item|1636360|你可能正在处理一个老的CSS问题，宽度和高度是基于最后一个非static+positioned元素的，这意味着这些元素的大小往往显示不正确。|offset|length|style|CODE|1636361|1636362|基于这一点，下面是一个正确的方法：|1636363|​|1636364|.div-wrapper
{
++position:+relative;
}

.div-wrapper+div+{
++width:+33.3%25;
++height:+50%25;
++float:+left;
++border:+1px+solid+black;
++box-sizing:+border-box;
}|code-block|syntax|javascript|1636365|<div+class="div-wrapper">
++<div>1</div>
++<div>2</div>
++<div>3</div>
++<div>4</div>
++<div>5</div>
++<div>6</div>
</div>|1636366|1636367|百分比将被更正，非static的父元素将确保这些百分比反映其大小。relative本质上只是解决这个问题的老牌CSS+hack。|1636368|float本质上指示浏览器尝试将它们全部绘制在同一条线上，但如果不能，则转到下一条线。就像文本的自动换行一样。left和替代方法right指定应用浮点数的元素的顺序。|1636369|使用box-sizing:+border-box;还允许您向div添加边框，而不必对宽度/高度执行任何calc，并且大小仍然可以正常工作。|1636370|entityMap^0|0|0|0|U|6|11|8|0|0|0|0|0|0|0|9|6|X|8|0|0|5|1J|4|1S|5|0|2|N|1F|4|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|18|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|19|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|1A|8|@$I|1B|J|1C|K|L]|$I|1D|J|1E|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1G|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1H|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|1I|8|@]|9|@]|A|$U|V]]|$1|W|3|X|5|T|7|1J|8|@]|9|@]|A|$U|V]]|$1|Y|3|Q|5|6|7|1K|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1L|8|@$I|1M|J|1N|K|L]|$I|1O|J|1P|K|L]]|9|@]|A|$]]|$1|11|3|12|5|6|7|1Q|8|@$I|1R|J|1S|K|L]|$I|1T|J|1U|K|L]|$I|1V|J|1W|K|L]]|9|@]|A|$]]|$1|13|3|14|5|6|7|1X|8|@$I|1Y|J|1Z|K|L]|$I|20|J|21|K|L]]|9|@]|A|$]]|$1|15|3|-4|5|6|7|22|8|@]|9|@]|A|$]]]|16|$]]

<p>It looks like you have two problems:</p>

<ol>
<li>Your percentages don't really make any sense based on what you describe. They should be 1/3 width and 1/2 height.</li>
<li>You are likely dealing with an old CSS problem, that width and height is based on the last non-<code>static</code> <code>position</code>ed element, meaning the sizes from such tend to not appear right.</li>
</ol>

<p>Based on that, here is a proper way to do this:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.div-wrapper
{
  position: relative;
}

.div-wrapper div {
  width: 33.3%;
  height: 50%;
  float: left;
  border: 1px solid black;
  box-sizing: border-box;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="div-wrapper"&gt;
  &lt;div&gt;1&lt;/div&gt;
  &lt;div&gt;2&lt;/div&gt;
  &lt;div&gt;3&lt;/div&gt;
  &lt;div&gt;4&lt;/div&gt;
  &lt;div&gt;5&lt;/div&gt;
  &lt;div&gt;6&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>The percentages are corrected, and a parent element that is non-<code>static</code> will ensure those percentages reflect its size. <code>relative</code> is essentially just a time-honored CSS hack for this issue.</p>

<p><code>float</code> essentially instructs the browser to attempt to draw them all on the same line, but flow onto the next if it cannot. Just like text with word wrap. <code>left</code> and the alternative, <code>right</code>, specify the ordering of the elements the float is applied to.</p>

<p>Using <code>box-sizing: border-box;</code> will also allow you to add a border to the divs, without having to do any <code>calc</code> on the width/height, and have the sizes still work properly.</p>


<p>I'm trying to align 6 divs in this way:</p>

<pre><code>1 2 3
4 5 6
</code></pre>

<p>but I don't know how to do it, all divs are dimensioned by percentage</p>

<pre><code>#folders {
background: #1abc9c;
height: 95%;
width: 15%;
}
</code></pre>


How to align html divs in rows and columns like a matrix

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我尝试这样对齐6个div：1 2 34 5 6但是我不知道怎么做，所有的div都是用百分比表示的#folders {background: #1abc9c;height: 95%;width: 15%;}

问如何像矩阵一样在行和列中对齐html div
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何像矩阵一样在行和列中对齐html divEN