The basic style for make this layot

北城余情 提交于 2020-01-06 11:54:52

问题


It looks like a table, but I'd like to implement it by using only CSS.

What is the most robust style for this layout that works with all browser?

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


You need one more div and two more classes, but it's very easy:

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.



来源:https://stackoverflow.com/questions/7419578/the-basic-style-for-make-this-layot

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!