4
我需要一个表的布局,看起来像下面这样:创建一个表仅使用CSS
小区中的一个(行跨度2)
小区二,三(旁边小区的一个和对方)
单元格4(单元格2和3下方的单元格2)
但是我遇到的问题是它只需要使用CSS完成,我根本不能在代码中使用任何表格元素。
如果单元格2,3和4为空,单元格1还需要拉伸至100%的宽度。
我正在Joomla的Artisteer 4模板上工作,并且搜索了所有内容,但无法找到工作解决方案。
我的代码如下:
<div class="prof-layout-wrapper">
<div class="prof-content-layout">
<div class="prof-content-layout-row">
<div class="prof-layout-cell prof-content">
<?php
echo $view->position('banner2', 'prof-nostyle');
if ($view->containsModules('breadcrumb'))
echo artxPost($view->position('breadcrumb'));
echo $view->positions(array('user1' => 50, 'user2' => 50), 'prof-article');
echo $view->position('banner3', 'prof-nostyle');
echo artxPost(array('content' => '<jdoc:include type="message" />', 'classes' => ' prof-m essages'));
echo '<jdoc:include type="component" />';
echo $view->position('banner4', 'prof-nostyle');
echo $view->positions(array('user4' => 50, 'user5' => 50), 'prof-article');
echo $view->position('banner5', 'prof-nostyle');?>
</div>
<?php if ($view->containsModules('left')) : ?>
<div class="prof-layout-cell prof-sidebar1">
<?php echo $view->position('left', 'prof-block'); ?>
</div>
<?php endif; ?>
<?php if ($view->containsModules('right')) : ?>
<div class="prof-layout-cell prof-sidebar2">
<?php echo $view->position('right', 'prof-block'); ?>
</div>
<?php endif; ?>
</div>
</div>
</div>
的CSS是:
.prof-layout-wrapper
{
position: relative;
margin: 0 auto 0 auto;
z-index: auto !important;
}
.prof-content-layout
{
display: table;
width: 100%;
table-layout: fixed;
float: left;
}
.prof-content-layout-row
{
display: table-row;
}
.prof-layout-cell
{
display: table-cell;
vertical-align: top;
}
对于我的生活,我不能让小区4跨越翻过不破坏整个布局。
请帮忙!
(我希望这是一个足够好的解释)
你是我的英雄!非常感谢你! – ImkeZA
@ImkeZA,根本不是 - 所以这是解决方案? – SW4