Html 如何在纯CSS中实现这一点？_Html_Css

Html 如何在纯CSS中实现这一点？

html css

Html 如何在纯CSS中实现这一点？,html,css,Html,Css,我有13个div元素，需要它看起来像这样：我被限制使用表格，即使这看起来像是表格的工作（说来话长，工作要求，照原样做就行了）我不能添加或删除任何html元素——这是我可以对添加属性标记（如类名）的元素所做的唯一修改以下是我到目前为止所做的（对于任何格式错误，我深表歉意） html，正文{ 身高：100%；宽度：100%；边际：0px；文本对齐：居中；垂直对齐：中间对齐； } 身体科{ 背景颜色：灰色；身高：24%；宽度：24%；显示：内联块；文本对齐：居中；垂直对齐：

我有13个div元素，需要它看起来像这样：

我被限制使用表格，即使这看起来像是表格的工作（说来话长，工作要求，照原样做就行了）

我不能添加或删除任何html元素——这是我可以对添加属性标记（如类名）的元素所做的唯一修改

以下是我到目前为止所做的（对于任何格式错误，我深表歉意）


html，正文{
身高：100%；
宽度：100%；
边际：0px；
文本对齐：居中；
垂直对齐：中间对齐；
}
身体科{
背景颜色：灰色；
身高：24%；
宽度：24%；
显示：内联块；
文本对齐：居中；
垂直对齐：中间对齐；
保证金：1px；
}
身体分割：第一个孩子+分割+分割+分割+分割+分割{
背景颜色：灰色；
身高：48%；
宽度：48%；
显示：内联块；
文本对齐：居中；
垂直对齐：中间对齐；
保证金：1px；
}
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13

第六分区有class=“double”
第八组有class=“三级”

内联块属性如果元素之间有空格或换行符，则添加较小的边距。必须以负左边距取代，这在浏览器中有点不可预测

如果第六行必须超过两行，还有一个解决方案：

css

html

使用float属性可以实现这一点

Html

检查小提琴

截图：

**更新：**

检查此更新

屏幕截图：

如果表格布局可行，则在非

表格

标记元素上使用的

表格

和

表格*

值@General_Twyckenham bad用大量代码模拟表格网格，却认为这是一种现代解决方案。使用表格有很多不好的方法，但是没有理由把表格弄坏。@JirkaKopřiva表格也不错——如果你真正想要的是一张表格的话。如果您只是将表格用于网格布局，那就太糟糕了@user1532208这正是我的建议：使用

display:table，显示：元素上的表单元格等将通过模拟CSS中的表布局（这是一个显示问题，所以应该存在于CSS中）提供您想要的内容，同时保持非表和语义正确的标记（这是一个内容问题，并且通过在标记中没有表来满足）。可能是相关的，这几乎满足了我的需要，除了我不能有包装“行”div。我必须保持兄弟div元素不变，但我可以应用类和/或属性标记。几乎就是这样——但我不能使用我上传的图像中的额外div元素来帮助可视化。我可以改变div的顺序吗？首先是div#9，然后是div#8是的，应该可以。对齐中存在一些问题，但我想我们可以解决这些问题吗？：）
<html>
<head>
<style type="text/css">
    html, body {
        height: 100%;
        width: 100%;
        margin: 0px;
        text-align:center;
        vertical-align:middle;
    }

    body div {
        background-color: gray;
        height: 24%;
        width: 24%;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        margin: 1px;
    }

    body div:first-child + div + div + div + div + div {
        background-color: gray;
        height: 48%;
        width: 48%;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        margin: 1px;
    }
</style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
</body>
</html>

div { float: left; width: 25%; height: 100%; }
div.double {  width: 50% } 
div.triple {  width: 75% } 
div.center { text-align: center; }

div { float: left; width: 25%; height: 1em; }
div.double { width: 50% } 
div.triple { width: 75% } 
div.center { text-align: center; }

div#six { position: absolute; height: 2em; left: 25%; top: 2em; }

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div class="triple">5</div>
<div id="six" class="double center">6</div>
<div>7</div>
<div class="triple">8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>

div { 
float: left;
width: 24%;
height: 2em;
margin: 0.1em;
border: 0.1em solid #000;
}

div.double { width: 47.8% } 
div.triple { margin-right: 48.8% } 
div.center { text-align: center; }

div#six { 
  position: absolute;
  height: 4.4em; 
  left: 24.6%; 
  top: 2.8em; 
  line-height: 400%; 
  border: 1px solid #185;
  color: #185;
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div class="w-50">6</div>
<div>7</div>
<div>8</div>
<div class="w-50">&nbsp;</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>

div 
{ 
    display: inline-block; 
    width: 25%;
text-align:center;
    float:left;
}
div.w-50 
{
    width:50%;
}