如何在另一个div中制作一个4X4的div面板？
要在另一个div中制作一个4x4的div面板，可以使用HTML和CSS来实现。以下是一个示例代码：
HTML代码：
<div id="container">
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>CSS代码：
#container {
display: flex;
flex-wrap: wrap;
width: 400px;
}
.row {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.cell {
width: 25%;
height: 100px;
border: 1px solid black;
}这段代码会在一个名为"container"的div中创建一个4x4的div面板。每个小方块都是一个名为"cell"的div，通过CSS设置其宽度为25%以实现4列布局。"row"类用于创建每一行，"container"类用于包裹整个面板。
这个面板可以根据需要进行样式调整，例如修改宽度、高度、边框样式等。
相关·内容
我正在尝试做这个简单的记忆游戏练习，它需要使用一个4x4的卡片面板，我尝试添加一个带有" panel“类的中间div部分，它限制了460x460的区域，这足以容纳4张卡片div，但它似乎不起作用。div class="card"></div>
<div class="card">&
浏览 31提问于2019-04-27得票数 0
1回答
我通过下面的代码制作了一个引导面板 <div class="panel-heading clearfix" id="drag">Anexplorer panel</div>
<div class="panel-body">I want to be dragab
浏览 1提问于2018-03-05得票数 0
我正在使用一个按钮，当您单击它时，它会创建一个面板，其中包含4个div、多个链接< href >和多个< img >s。创建的面板将成为一个节点，可以拖动并连接到我正在工作的其他节点。我还在使用Jinja，并将值从sqlite数据库传递到面板，该面板也可以工作。我用html制作了它，但我不知道如何在JavaScript中实现它。我正在使用j
浏览 1提问于2014-06-27得票数 0
回答已采纳
2回答
如何设置引导面板的大小？
、、、
所以我用面板制作了一个网页。这样做的目的是从数据库中获取行并在面板上显示它。我将面板的宽度设置为15%，并在视觉上将面板的大小调整为15%。我想让面板点击，所以我添加了一个(<'a'>)周围的面板，让我感到惊讶的是，即使面板在视觉上是15%的大小，它仍然占用整个
浏览 1提问于2017-04-10得票数 0
回答已采纳
1回答
我从引导程序中用collapse.js制作了一个导航菜单。我为affix.js添加了一个div (sidemenu)。问题是，当我添加词缀div时，我的面板在打开另一个面板时不会自动关闭。当我移除词缀div时，它又正常工作了。
知道怎么解决这个问题吗？
浏览 7提问于2014-09-11得票数 0
回答已采纳
2回答
使用bootstrap，如何在面板标题中水平对齐组件？为了使: title :左对齐，btn1 :居中，btn2 :右对齐。<div class="panel panel-default"> <h3 class="panel-title<button class="btn">btn1</button&g
浏览 1提问于2015-03-06得票数 12
回答已采纳
1回答
我正在尝试使用Bootstrap中的折叠功能，而且它在很大程度上是有效的。我基本上是在制作手风琴，虽然它看起来不像手风琴，因为我只想一次只看到一个面板。不过，我没有使用Bootstrap的手风琴功能，因为它似乎依赖于使用面板，这是我不想做的。因此，在它几乎正常工作之后，唯一的问题是，如果您展开一个div，然后单击'header‘(只是另一个div
浏览 0提问于2014-12-15得票数 0
回答已采纳
如何制作这样的东西？<!/a> </div>
<div style="height: 10%"> <a href="sic.html">
浏览 2提问于2014-12-14得票数 0
我想知道是否有一种方法可以检测一个面板是否打开，如果是，在打开另一个面板之前自动将其关闭？此检测应在用户单击按钮时发生。 $(function() { $("#content-inner-panel
浏览 2提问于2011-07-08得票数 4
回答已采纳
1回答
嗨，我正试着在bootstrap中创建一个面板。我是个新手，所以如果这是一个简单的问题，我很抱歉。我正在尝试创建一个类似于这个网站的面板：到目前为止的代码：
<div</em
浏览 3提问于2016-02-24得票数 1
1回答
我目前正在一个租车网站上工作，我正在用棱角来建造它。这很容易通过标准过滤器和每个过滤器按钮的一个小指令来实现，但是我可以想象ng重复属性使用类似于12个过滤器的时间。也许我没什么好怕的，但还是。我想让你们运行的是如
浏览 0提问于2013-10-09得票数 0
我在twitter引导面板中有ASP控件。在额外的小设备上，我需要隐藏面板，但仍然显示ASP控件。如果我在面板上使用隐藏-xs类，那么控件也是隐藏的。有没有一种方法可以做到这一点而不创建重复的ASP控件？<div class="panel panel-default hidden-xs"> <di
浏览 5提问于2017-04-05得票数 0
回答已采纳
我有一个标签容器，里面有八个面板。为了使其更易于用户验证，我设置了7个面板enabled=false，直到用户通过下拉菜单选择要编辑/插入的项目。但是当他们选择一个项目，并且dropdownlist执行回发时，我得到以下错误："Microsoft : Sys.InvalidOperationException: Handler I not and在此期间，我已经更改了代码，让面板Visible=false，这不会弹出错误，但我不喜欢被击败，所以如果谁有什么原因和如何修
浏览 0提问于2012-05-11得票数 1
回答已采纳
我在我的项目中使用Sencha Touch charts 1.0.0。我在RHS上创建了一个带有图例的饼图。我想在图表下面添加一些文本。它是由图表表示的总单位，并显示为：“2.13亿单位”。如果不能通过图表，是否可以将其作为HTML元素添加到图表面板中？
感谢您的帮助。
浏览 4提问于2012-03-08得票数 0
1回答
我需要翻转一个div面板左一旦某个项目div被点击并隐藏，一旦项目div再次被点击。(就像新的twitter阅读面板一样)。有没有什么好的建议或代码片段来满足我的需求？？以下是我用于动画和gt显示
浏览 0提问于2011-05-28得票数 3
回答已采纳
我有一个带有主引导面板的页面，在这个面板中我有另一个面板。目标是在主面板中有多个嵌套面板，创建类似于图片库的东西。
我能够创建内容，此时它是响应性的，在必要时调整每一行嵌套面板的数量和大小。然而，内部面板有一个图像，应该是居中。我尝试将图像放在div中，并使用类容器。然而，当我这样做的
浏览 0提问于2014-03-08得票数 7
回答已采纳
2回答
我有两个div的格式为面板。一个是主面板，另一个是类似侧栏的东西。我希望侧边栏向左浮动，但后者嵌入主div中。我希望它显示在主面板的旁边，而不是在它里面。我知道我可以将侧边栏向左浮动，主面板向右浮动，并在它们之后添加更多内容，并使用clear: both使页面调整大小并正确滚动；然而，这听起来像是一个黑客，它需要指定两个面板的大
浏览 5提问于2017-09-13得票数 3
回答已采纳
我正在尝试最新的Sencha Touch 1.1.0开源发行版附带的列表搜索示例，我得到了这个错误：
Ext.List: itemTpl is a required configuration.
浏览 0提问于2011-04-30得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
