1. 技术文章
  2. Can I start new row of CSS table cells without a row wrapper element?

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

由 风格不统一 提交于 2019-12-10 01:09:50

问题


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?


回答1:


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




回答2:


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).




回答3:


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%




回答4:


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>



回答5:


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/




回答6:


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




回答7:


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/




回答8:


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