Question

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

table-like layout

我被限制使用表格，即使这看起来像是一张桌子的工作（长篇故事，工作要求，只是按原样使用）

我无法添加或删除任何html元素 - 我可以对添加属性标记（如类名）的元素进行唯一修改。

这是我到目前为止所做的（对于任何格式错误感到抱歉）

<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>

Answer 1

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

第6个div有class =＆＃34; double＆＃34;
第8个div有class =＆＃34; triple＆＃34;

如果元素之间有空格或换行符，则内联块prioperty会添加小的边距。必须用负左边距取代，这在浏览器的方式上有点不可预测。

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

CSS

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; }

HTML

<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;
}

http://codepen.io/anon/pen/xLHwy

Answer 2

使用float属性可以实现此目的。

HTML

<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>

的CSS

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

检查小提琴here

屏幕截图：

enter image description here

**更新：**

检查此更新的fiddle

屏幕截图： enter image description here

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

2 个答案: