Skip to main content
adicionou 2772 caracteres ao conteúdo
Fonte Link
Aline
  • 1,7mil
  • 9
  • 21

CSS:

.column {
        margin: 0 auto;
        padding: 5px;
        text-align: center;
        border:1px solid #cecece;
    }

HTML:

<div id="geral">
    <link href="https://rawgit.com/twbs/bootstrap/master/dist/css/bootstrap.css" rel="stylesheet" />
    <section role="main" class="content-body">
        <div class="rowCustom">
            <div class="column">
                Condominio
            </div>
            <div class="column">
                Predio
            </div>
            <div class="column">
                Andar
            </div>
            <div class="column">
                Apartamento
            </div>
            <div class="column">
                Comodo
            </div>
        </div>

        <div class="rowCustom">
            <div class="column">
                <div class="item">Bosque das flores</div>
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
        </div>

        <div class="rowCustom">
            <div class="column">
            </div>
            <div class="column">
                <div class="item">Orquidea</div>
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
        </div>

        <div class="rowCustom">
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
                <div class="item">1º Andar</div>
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
        </div>

        <div class="rowCustom">
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
                <div class="item">2º Andar</div>
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
        </div>

        <div class="rowCustom">
            <div class="column">
            </div>
            <div class="column">
                <div class="item">Rosa</div>
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
        </div>

        <div class="rowCustom">
            <div class="column">
                <div class="item">Cond Grego</div>
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
        </div>

        <div class="rowCustom">
            <div class="column">
            </div>
            <div class="column">
                <div class="item">Apolo</div>
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
        </div>
    </section>
</div>
.column {
        margin: 0 auto;
        padding: 5px;
        text-align: center;
        border:1px solid #cecece;
    }

CSS:

.column {
        margin: 0 auto;
        padding: 5px;
        text-align: center;
        border:1px solid #cecece;
    }

HTML:

<div id="geral">
    <link href="https://rawgit.com/twbs/bootstrap/master/dist/css/bootstrap.css" rel="stylesheet" />
    <section role="main" class="content-body">
        <div class="rowCustom">
            <div class="column">
                Condominio
            </div>
            <div class="column">
                Predio
            </div>
            <div class="column">
                Andar
            </div>
            <div class="column">
                Apartamento
            </div>
            <div class="column">
                Comodo
            </div>
        </div>

        <div class="rowCustom">
            <div class="column">
                <div class="item">Bosque das flores</div>
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
        </div>

        <div class="rowCustom">
            <div class="column">
            </div>
            <div class="column">
                <div class="item">Orquidea</div>
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
        </div>

        <div class="rowCustom">
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
                <div class="item">1º Andar</div>
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
        </div>

        <div class="rowCustom">
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
                <div class="item">2º Andar</div>
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
        </div>

        <div class="rowCustom">
            <div class="column">
            </div>
            <div class="column">
                <div class="item">Rosa</div>
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
        </div>

        <div class="rowCustom">
            <div class="column">
                <div class="item">Cond Grego</div>
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
        </div>

        <div class="rowCustom">
            <div class="column">
            </div>
            <div class="column">
                <div class="item">Apolo</div>
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
        </div>
    </section>
</div>
adicionou 123 caracteres ao conteúdo
Fonte Link
Aline
  • 1,7mil
  • 9
  • 21
$(document).ready(function () {
        $(".column").css("width", $("#geral").outerWidth() / $(".content-body>.rowCustom:first>div").length);
    });

Se for usar jquery, não esqueça a referência da lib.

.column {
        margin: 0 auto;
        padding: 5px;
        text-align: center;
        border:1px solid #cecece;
    }
$(document).ready(function () {
        $(".column").css("width", $("#geral").outerWidth() / $(".content-body>.rowCustom:first>div").length);
    });

Se for usar jquery, não esqueça a referência da lib.

$(document).ready(function () {
        $(".column").css("width", $("#geral").outerWidth() / $(".content-body>.rowCustom:first>div").length);
    });

Se for usar jquery, não esqueça a referência da lib.

.column {
        margin: 0 auto;
        padding: 5px;
        text-align: center;
        border:1px solid #cecece;
    }
Fonte Link
Aline
  • 1,7mil
  • 9
  • 21

$(document).ready(function () {
        $(".column").css("width", $("#geral").outerWidth() / $(".content-body>.rowCustom:first>div").length);
    });

Se for usar jquery, não esqueça a referência da lib.