我想用DIV CSS做一行3列， 和1列多行 不知道怎么做，

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我想用DIV CSS做一行3列， 和1列多行 不知道怎么做，相关的知识，希望对你有一定的参考价值。

我左右浮动然后第 我左右浮动然后第3列就跑到第2行去了， 还有一列多行怎么做， 请高手指点下
最好有QQ请教下，其他的好说

1行3列实现代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>景安</title>
<style type="text/css">
.zzidcwidth: 500px;height: 300px;background: red;
.afloat: left;width: 200px;height: 300px;background: blue;
.bfloat: left;width: 100px;height: 300px;background: green;
.cfloat: left;width: 200px;height: 300px;background: gray;

</style>

</head>
<body>
<div class="zzidc">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

</div>
</body>
</html>

1列多行实现代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>景安</title>
<style type="text/css">
.awidth: 300px;height: 50px;background: blue;
.bwidth: 300px;height: 50px;background: green;
.cwidth: 300px;height: 50px;background: gray;

</style>

</head>
<body>

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

</div>
</body>
</html>

实现一行3列的话可以使用浮动布局或者定位，实现一列多行的使用使用默认布局模式即可

 参考技术A <style>
.myDiv width:300px; border:1px solid #000;border-right:0; height:30px
.myDiv ul width:300px; list-style:none; margin:0; padding:0; height:30px
.myDiv ul li width:99px; float:left; border-right:1px solid #000; height:30px
.myDiv1 width:300px; border:1px solid #000;border-bottom:0; height:93px
.myDiv1 ul width:300px; list-style:none; margin:0; padding:0; height:93px
.myDiv1 ul li width:300px; float:left; border-bottom:1px solid #000; height:30px
</style>
一行三列
<div class="myDiv">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
一列多行
<div class="myDiv1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>本回答被提问者采纳 参考技术B 一列多行就是三个div...
一行多列建议用表格.表格还是很好的东西,你不要把他弄成定位的工具,就可以了. 参考技术C QQ553912787

直接交流容易点，不然发出一串代码估计你也得头晕。 参考技术D 明显是宽度不够~~

根据列值将一行分解/拆分为多行

【中文标题】根据列值将一行分解/拆分为多行【英文标题】：Explode/Split one row into multiple rows based on column value 【发布时间】：2021-07-26 13:33:13 【问题描述】：

我有一张需要分解和拆分的表 - 根据 MariaDB 中的 app_permissions 列值从一行生成多行：

[email]        | [app_permissions]
john@p.ai      | draft49:CAN_ACCESS_APP;CAN_VIEW_FINANCIAL_DATA; com.cc.worker:CAN_ACCESS_APP;CAN_VIEW_FINANCIAL_DATA

这是预期的查询结果：

[email]        | [app_permissions]
john@p.ai      | draft49:CAN_ACCESS_APP
john@p.ai      | draft49:CAN_VIEW_FINANCIAL_DATA
john@p.ai      | com.cc.worker:CAN_ACCESS_APP
john@p.ai      | com.cc.CAN_VIEW_FINANCIAL_DATA

我试图交叉连接到同一个表，但它没有产生这个输出

此外，据我所知，MariaDB 没有原生的“split_part”功能，并且我正在努力避免为此目的创建过程。

数据库：MariaDB 10.2

【问题讨论】：

【参考方案1】：

这很痛苦，但是你可以构造一个数字列表，然后使用substring_index()提取分号之间的第n个子字符串。

然后您需要从字符串中删除您似乎不想要的其他字符：

select t.email,
       replace(replace(replace(substring_index(substring_index(t.app_permissions, ';', n.n), ';', -1), '', ''), '', ''), ' ', '') as permission
from t join
     (select 1 as n union all select 2 as n union all select 3 as n union all select 4 as n union all select 5) n
     on t.app_permissions like concat('%', repeat(';%', n - 1));

我建议您修复您的数据模型，这样您就不会在单个字符串中存储多个值。

Here 是一个 dbfiddle。

【讨论】：

我同意这个数据模型并不理想。很好的答案！它回答了我需要的 80%，因为它仅限于 5 个权限，我需要更通用的东西 @Arik 。 . .只需将定义 n 的子查询扩展为您需要的任意数量。

以上是关于我想用DIV CSS做一行3列， 和1列多行 不知道怎么做，的主要内容，如果未能解决你的问题，请参考以下文章

HTML中的div三行三列代码,非CSS

div+css布局完整代码 三行两列 另外如果把两列分为四格 怎么做

div+css布局完整代码 三行两列 另外如果把两列分为四格 怎么做

css让表格第一列和第一行固定

有效地使用 *ngFor 和网格 CSS

CSS+DIV一行三列（等宽高，有间距）怎么写