进行此布局的基本样式

时间:2011-09-14 16:17:01

标签: css css3

它看起来像一个表,但我想通过仅使用CSS来实现它。

适用于所有浏览器的此布局最强大的样式是什么?

        _________
        | A |__b__|
        |_A_|__c__|

<div class='container'>
        <div class='sectA'> A </div>
    <div>
        <div class="sectB"> b </div>
        <div class="sectC"> c </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:1)

你还需要一个div和另外两个类,但这很容易:

HTML

<div class='container'>
        <div class='sectA'> A </div>
    <div class="separator">
        <div class="sectB"> b </div>
        <div class="sectC"> c </div>
    </div>
    <div class="clear">&nbsp;</div>
</div>

CSS:

.container div.sectA
{
    float: left;
    width: 100px;
    height: 100px;
    border: 1px dotted #000;
}

div.separator
{
    float: left;
}

div.sectB,
div.sectC
{
    float: none;
    width: 100px;
    height: 50px;
    border: 1px dotted #f00;
}

.clear
{
    clear: both;
}

Click here for an example