Html 在中间和定制SoC中用两个固定柱拉伸4个CL模板。可能的_Html_Css_Layout

Html 在中间和定制SoC中用两个固定柱拉伸4个CL模板。可能的

html css layout

Html 在中间和定制SoC中用两个固定柱拉伸4个CL模板。可能的,html,css,layout,Html,Css,Layout,html代码源代码顺序应如下所示： <body> <div>col2</div> <div>col3</div> <div>col1</div> <div>col4</div> </body> <----------------------100%-----------------------> +--------+--------

html代码源代码顺序应如下所示：

<body>
    <div>col2</div>
    <div>col3</div>
    <div>col1</div>
    <div>col4</div>
</body>

<----------------------100%----------------------->
+--------+-------------------+-----------+--------+
|  col1  |       col2        |    col3   |  col4  |
|        |                   |           |        |
| (100%  |      (664px)      |  (312px)  | (100%  |
| -976px)|                   |           | -976px)|
| /2 px  |                   |           |  /2 px |
|        |                   |           |        |
|        |                   |           |        |
|        |                   |           |        |
|        |                   |           |        |
+--------+-------------------+-----------+--------+


可乐
可乐
可乐
可乐

应该是这样的：

<body>
    <div>col2</div>
    <div>col3</div>
    <div>col1</div>
    <div>col4</div>
</body>

<----------------------100%----------------------->
+--------+-------------------+-----------+--------+
|  col1  |       col2        |    col3   |  col4  |
|        |                   |           |        |
| (100%  |      (664px)      |  (312px)  | (100%  |
| -976px)|                   |           | -976px)|
| /2 px  |                   |           |  /2 px |
|        |                   |           |        |
|        |                   |           |        |
|        |                   |           |        |
|        |                   |           |        |
+--------+-------------------+-----------+--------+


+--------+-------------------+-----------+--------+
|col1 | col2 | col3 | col4|
|        |                   |           |        |
|（100%|（664px）|（312px）|（100%|
|-976px）| | |-976px）|
|/2像素| | |/2像素|
|        |                   |           |        |
|        |                   |           |        |
|        |                   |           |        |
|        |                   |           |        |
+--------+-------------------+-----------+--------+

它应该伸展到全宽
col2的固定宽度应为664px
col3的固定wizth应为312px
col1和col4的宽度应相等，并填充整个屏幕宽度
这应该只使用css来完成
所有主流浏览器都应该支持它

我可以将col2/col3打包到另一个div容器中，基本上可以处理3列布局。但如果可能的话，我真的想避免这个额外的容器。有可能吗？

您好，joe

尽管在布局中使用与div相反的表并不是真正的方法，但在这种情况下，它可能是您唯一的选择。优点是表格的单元格将占用所有可用空间，您可以将特定宽度与相对宽度结合起来。使用div也可以实现同样的功能，但我认为不使用JavaScript进行一些计算是不可能做到的

这里有一个简单的例子。中间的两个单元格具有固定的宽度；外面的细胞会吸收剩下的。但要确保桌子足够宽。如果外部细胞中有内容，考虑这些细胞的最小宽度，并将其添加到表的最小宽度。

HTML:

示例：

我认为这是一个否，thx:）表对我来说不是解决方案，因为源顺序不符合要求，我将把两个固定宽度的列包装在一个div中，然后它可能。。。