假设我想要这样的布局:

+---+---+
| A | B |
+---+---+
| C | D |
+---+---+

在上面的例子中,我希望A和C的宽度相同,而BD保持原样。

我也想要的高度AB一直锁在一起,我想C保持彼此不变。

如果我使用CSS布局来尝试类似的东西,我可能会得到这样的结果:

+-------+---+
|   A   | B |
+---*---*---+
| C |   D   |
+---+-------+

我想要的只是一种使HTML元素与其他HTML元素对齐的方法,而不必使用表!

或有或无或有或无提问于
脸滚键盘dj以梦为马,诗酒趁年华回答于
已采纳

可以将元素显示为不是语义表的表,只使用CSS。使用display属性,则可以在标记中有div时模拟表。这篇文章

如果只希望每列中的两行与列的宽度保持一致,则应尝试将行放在列标记中,而不是相反。这是在没有预定义的维度的情况下工作的。

另外,如果为一行中的每个单元格设置相同的高度,可以简单地将它们向左浮动,并将容器宽度设置为行宽度之和。这只适用于预定义的维度。

CSS

div.c
{
    width: 100%;
}

div.c>div:nth-child(2n-1)
{
    width: 25%;
    float: left;
    background: blue;
}

div.c>div:nth-child(2n)
{
    width: 75%;
    float: left;
    background: yellow;
}

这里有一把fiddle:http://jsfiddle.net/kdani3/dbruv/

一个更复杂的例子:http://jsfiddle.net/kdani3/dbruv/1/

我认为它真的很简单,甚至比使用表格布局更简单。

此外,我还建议看看css网格框架,如推特启动那绝对值得一看

回答过的其他问题

为什么不同的人在购物网站上搜索同样的东西看到的结果不一样?

脸滚键盘dj以梦为马,诗酒趁年华
算法推荐系统咯。 我用一个相对简单的模式来说明一下好了: 你开始进入某购物网站时 搜索一个东西的时候 比如说显卡吧 [图片] 会有很多选项供你选择 首先,店家在上架一个货物时,要选择xx品牌 xx内核 xx显存 xx位宽 xx型号....这些东西会显示在这里 [图片] ...... 展开详请

Java怎么提取字符串里面特定的内容?

脸滚键盘dj以梦为马,诗酒趁年华
已采纳
一部分 后面自己想想把 还可以用正则 String a = "id-1=144761,fileName-2=林俊杰 - 剪云者 [mqms2].mp3,title-3=剪云者, duration-4=215824, singer-5=林俊杰, album-6=伟大的渺小, ye...... 展开详请

静态转换后将变量转换为枚举

脸滚键盘dj以梦为马,诗酒趁年华
enumTests e_Test = static_cast<enumTests>(i); GetTest(e_Test); i = static_cast<int>(e_Test); 是正确的方法。 以下编译,但不幸的是,打破了严格的别名规则,UB也是如此: static_...... 展开详请

腾讯云服务器初始化设置是在哪里,服务器开通后配置了很多东西,现在想恢复干净原始系统,不知道怎么操作?

脸滚键盘dj以梦为马,诗酒趁年华
已采纳

个人非经营还要备案吗?

脸滚键盘dj以梦为马,诗酒趁年华

小程序开发可以就用微信模板吗?

脸滚键盘dj以梦为马,诗酒趁年华

关于作者

脸滚键盘dj

以梦为马,诗酒趁年华

所属标签

扫码关注云+社区