Can I start new row of CSS table cells without a row wrapper element?

Given markup like this:

<div class="a">A</div>
<div class="b">B</div>
<div class="a">A</div>
<div class="b">B</div>
<div class="a">A</div>
<div class="b">B</div>

Is it possible to style this document to look like this:

|-------|---------|
|       |         |
|   A   |    B    |
|       |         |
|-------|---------|
|       |         |
|   A   |    B    |
|       |         |
|-------|---------|
|       |         |
|   A   |    B    |
|       |         |
|-------|---------|

(and if the content in A or B is longer, its neighbor will grow to match its height)…

without any additional markup?

I understand that giving .a and .b a display value of table-cell would just make this one big row.

What’s the solution?

Not without flexbox, which hasn’t landed in several major browsers yet, seems to be the consensus.

No, I think it's not possible "without any additional markup". It needs:

div wrapper with display: table-row; containing A anb B "cells"
JavaScript with listeners on divs, which will determine max of A anb B's heights in each pair and set it to smaller one

Solution for second one:

CSS:

.a, .b {
    padding: 0.5em;
    float: left;
}
.a:nth-child(n+1) {
    clear: both;
}

jQuery:

$(function() {
    var max_width_a = 0, max_width_b = 0;
    $("div.a").each(function() {
        var elem_a = $(this),
            elem_b = elem_a.next("div.b"),
            height_a = elem_a.height(),
            height_b = elem_b.height(),
            pair = [elem_a, elem_b];

        max_width_a = Math.max(max_width_a, elem_a.width());    
        max_width_b = Math.max(max_width_b, elem_b.width());  
        $(pair).height(Math.max(height_a, height_b));
    }).width(max_width_a);
    $("div.b").width(max_width_b);
});

I've updated your Fiddle. Works on document ready, you have to customize it if you want to determine dynamic height changes.

Let me know if I have to explain how it works. Of course you can coerce div.a and div.b's width in CSS and don't check for max width with jQuery (then you will have to determine only max height in each pair).

no, this is not possible without giving each row a wrapper.

here's a pure css solution with a single containing wrapper (per row)

.row { 
    background-color: #ccc;
    float: left;
    margin: 10px 0;
    padding: 1em;
    width: 50%;
    }
.a {
    float: left;
    width: 45%;
    }
.b {
    float: right;
    width: 45%;
    }

and the html

<div class="row">
    <div class="a">Mofo break yo neck, yaonna chung fizzle, bizzle dizzle dang dolor boom shackalack augue. Fizzle izzle away sit its fo riz</div>
    <div class="b">Lorizzle hizzle dolizzle sit amet, brizzle adipiscing elizzle. Nullam i saw beyonces tizzles and my pizzle went crizzle shizzlin dizzle, fo shizzle mah nizzle fo rizzle, mah home g-dizzle sizzle, suscipit quizzle, i saw beyonces tizzles and my pizzle went crizzle vizzle, arcu. Break yo neck, yall shiznit tortor. Sed eros. Ma nizzle izzle you son of a bizzle dapibizzle turpishizzle. Integizzle check out this velit sed fo.</div>
</div>
<div class="row">
    <div class="a">Sizzle ullamcorpizzle. Shut the shizzle up sagittizzle dizzle a shiznit. Vestibulizzle you son of a bizzle ipsizzle primis izzle faucibus orci pot et ultrices posuere dope Fo shizzle; Crazy vestibulizzle. Fo shizzle my nizzle habitant morbi tristique senectus ma nizzle netizzle izzle tellivizzle famizzle turpis hizzle. Donizzle tempor hendrerit hizzle. Aliquizzle erat volutpat. </div>
    <div class="b">Vivamizzle sagittis.rttitizzle izzle, boom shackalack hizzle, orci. Integizzle hizzle funky fresh lectus. </div>
</div>
<div class="row">
    <div class="a">Donizzle tempor hendrerit hizzle. Aliquizzle erat volutpat. Things crunk fizzle, scelerisque bizzle, daahng dawg the bizzle, crackalackin shiznit, arcu. Daahng dawg elizzle. Crazy fermentizzle, est izzlot purizzle , bibendizzle sizzle amizzle, fo shizzle vehicula, fo shizzle my nizzle malesuada, shizznit. Aenizzle fizzle ipsizzle izzle est ullamcorpizzle tincidunt. Cool quizzle. Mauris ligula urna, tempizzle shut th</div>
    <div class="b">Mofo break yo neck, yall fo shizzle izzle leo bibendum crackalackin. Vivamizzle shit tortor vizzle away. Brizzle malesuada fo magna. Dang commodo, nisl nizzle go to hizzle egestizzle, magna dolor w</div>
</div>

if you want a and b to have different background colors you will have to use height:100%

i put this in a comment, but should probably just make it an answer. here's how you do the same thing (using rows) forcing a 100% height as well

.row {
    background-color: #ccc;
    float: left;
    margin: 10px 0;
    padding: 1em;
    width: 50%;
}

#container_a {
    background-color: blue;
    float: left;
    position: relative;
    right: 50%;
    width: 100%;
}
#container_b {
    background-color: red;
    float: left;
    overflow: hidden;
    position: relative;
    right: 0;
    width: 100%;
}
#column_a {
    float: left;
    left: 50%;
    overflow: hidden;
    position: relative;
    width: 46%;
}
#column_b {
    float: left;
    left: 56%;
    overflow: hidden;
    position: relative;
    width: 46%;
}

and the html

<div class="row">
    <div id="container_b">
        <div id="container_a">
            <div id="column_a">Lorizzle hizzle dolizzle sit amet, brizzle adipiscing elizzle. Nullam i saw beyonces tizzles and my pizzle went crizzle shizzlin dizzle, fo shizzle mah nizzle fo rizzle, mah home g-dizzle sizzle, suscipit quizzle, i saw beyonces tizzles and my pizzle went crizzle vizzle, arcu. Break yo neck, yall shiznit tortor. Sed eros. Ma nizzle izzle you son of a bizzle dapibizzle turpishizzle. Integizzle check out this velit sed fo.</div>
            <div id="column_b">Vivamizzle sagittis.rttitizzle izzle, boom shackalack hizzle, orci. Integizzle hizzle funky fresh lectus. </div>
        </div>
    </div>
</div>
<div class="row">
    <div id="container_b">
        <div id="container_a">
            <div id="column_a">Lorizzle hizzle dolizzle sit amet, brizzle adipiscing elizzle. Nullam i saw beyonces tizzles and my pizzle went crizzle shizzlin dizzle, fo shizzle mah nizzle fo rizzle, mah home g-dizzle sizzle, suscipit quizzle, i saw beyonces tizzles and my pizzle went crizzle vizzle, arcu. Break yo neck, yall shiznit tortor. Sed eros. Ma nizzle izzle you son of a bizzle dapibizzle turpishizzle. Integizzle check out this velit sed fo.</div>
            <div id="column_b">Vivamizzle sagittis.rttitizzle izzle, boom shackalack hizzle, orci. Integizzle hizzle funky fresh lectus. </div>
        </div>
    </div>
</div>
<div class="row">
    <div id="container_b">
        <div id="container_a">
            <div id="column_a">Lorizzle hizzle dolizzle sit amet, brizzle adipiscing elizzle. Nullam i saw beyonces tizzles and my pizzle went crizzle shizzlin dizzle, fo shizzle mah nizzle fo rizzle, mah home g-dizzle sizzle, suscipit quizzle, i saw beyonces tizzles and my pizzle went crizzle vizzle, arcu. Break yo neck, yall shiznit tortor. Sed eros. Ma nizzle izzle you son of a bizzle dapibizzle turpishizzle. Integizzle check out this velit sed fo.</div>
            <div id="column_b">Vivamizzle sagittis.rttitizzle izzle, boom shackalack hizzle, orci. Integizzle hizzle funky fresh lectus. </div>
        </div>
    </div>
</div>

I've written a jQuery plugin that accomplishes this. It converts a float layout into a display:table layout and handles the rows for you. Cell widths are handled automatically without script (much faster). It's responsive too. It's called WRECKER!! Hahahaha!.

svachon.com/blog/wrecker-responsive-equal-height-columns-and-rows/

Nick Budden

You CAN do this without flexbox, but you'll need to use nth-child(). Have a look at this answer: https://stackoverflow.com/a/12589629/740836

I can't think of a way without a row wrapper, but if you know the exact width of the outer div will never change, it is possible to achieve. My workaround for this is relying on the wrapper size to fit a and b on same row and then the next a and b will automatically be pushed so that it wraps around to the next row. However, if the width of the wrapper shrinks, a and b won't go on the same line.

<div id="wrapper">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="a">A</div>
  <div class="b">B</div>
</div>

<style>
#wrapper { width: 500px;}
.a { background-color:green; float:left; width:50%;}
 .b {background-color:red;float:left;width:50%;}
</style>

http://jsfiddle.net/Lf0arzkn/1/

Yes, it is possible with display: contents if you limit yourself to one child (like a text node or an element, but actually in CSS box terms) in the cell just before (or after if you adapt my solution accordingly) the break.

<style>
#d1::after {
    content: "";
    display: table-row;
}
</style>
<div style="display: table">
<div id="d1" style="display: contents">aaaaaaaaaa</div>
<div style="display: table-cell">bbbbbbbbb</div>
</div>

来源：https://stackoverflow.com/questions/10889089/can-i-start-new-row-of-css-table-cells-without-a-row-wrapper-element

标签

css

css-tables