blocks|key|43257|text|尝试以下操作：(working+jsFiddle)|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|43258|HTML：|43259|<div+class="container">
++++<div+class="cell"+id="cell1"></div>
++++<div+class="cell"+id="cell2"></div>
++++<div+class="cell"+id="cell3"></div>
</div>|code-block|syntax|javascript|43260|CSS：|43261|.container{overflow:hidden;+width:100%25;}
.cell{width:50%25;+float:right;}
#cell1{float:left;}|43262|在这种情况下，您的方法(将div放在行中)不是一个好的选择。我的是按列分隔的。|style|CODE|43263|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/zV3bN/1/^0|8|G|0|0|0|0|0|0|D|3|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|18|8|@$A|19|B|1A|Q|R]]|9|@]|C|$]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]]]

<p>Try the following: (<a href="http://jsfiddle.net/zV3bN/1/" rel="nofollow">working jsFiddle</a>)</p>

<p>HTML:</p>

<pre><code>&lt;div class="container"&gt;
    &lt;div class="cell" id="cell1"&gt;&lt;/div&gt;
    &lt;div class="cell" id="cell2"&gt;&lt;/div&gt;
    &lt;div class="cell" id="cell3"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.container{overflow:hidden; width:100%;}
.cell{width:50%; float:right;}
#cell1{float:left;}
</code></pre>

<p>Your approach (which places the <code>div</code>s in rows) is not a good choice in this case.. mine separates them by columns.</p>


blocks|key|2517989|text|您可以使用display:inline-block而不是float。只需将左侧和右侧容器的宽度设置为约50%25+(根据填充、边距和边框进行调整)，并将它们设置为内联块。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2517990|Here+is+my+jsFiddle|2517991|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/zuRH2/^0|5|K|S|5|0|0|J|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@$9|V|A|W|1|X]]|E|$]]|$1|H|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

<p>You could use <code>display:inline-block</code> instead of <code>float</code>. Just set widths of about 50% (adjust depending on padding, margins and borders) for the left and right containers and make them inline-block.</p>

<p><a href="http://jsfiddle.net/zuRH2/" rel="nofollow">Here is my jsFiddle</a></p>


blocks|key|43192|text|您需要inline-block和float：这是|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|43193|.list-row+{
++++background:#f4f4f4;
++++display:inline-block;
++++border:2px+solid+red;}

.list-left+{
++++width:auto;
++++padding:10px;
++++float:left;
++++border:+2px+solid+blue;}

.list-right+{
++++padding:10px;
++++float:right;
++++border:2px+solid+green;}|code-block|syntax|javascript|43194|此外，由于没有使用relative或absolute定位，因此不需要指定top和left。|43195|entityMap^0|3|C|G|5|0|0|9|8|I|8|10|3|14|4|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|N|$]]

<p>You need <code>inline-block</code> and <code>float</code>: here's the <strong><a href="http://jsfiddle.net/utZR3/1/" rel="noreferrer">jsFiddle</a></strong></p>

<pre><code>.list-row {
    background:#f4f4f4;
    display:inline-block;
    border:2px solid red;}

.list-left {
    width:auto;
    padding:10px;
    float:left;
    border: 2px solid blue;}

.list-right {
    padding:10px;
    float:right;
    border:2px solid green;}
</code></pre>

<p>Also, since you're not using <code>relative</code> or <code>absolute</code> positioning, you don't need to specify <code>top</code> and <code>left</code>.</p>


blocks|key|43044|text|行跨度不可用于显示:表，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|43045|但你仍然可以使用它来接近你正在寻找的东西。|43046|http://codepen.io/anon/pen/kqDab|offset|length|43047|display:inline-table被用在节目中，所以他们互相靠边站。你可以把它转回display:table。|style|CODE|43048|我在这里看到的选项是设置父容器的高度，使其具有高度:xx%25+avalaible+for+direct+childs元素(如果它是:+float，inline-block，table...)。其他选项是垂直对齐-如果为display:table-cell;，则单元格居中对齐。|43049|带有与第一个演示相同的CSS的超文本标记语言：http://codepen.io/anon/pen/dvlsG|43050|43051|edit+display:flex现在也是一个很好的选择:http://codepen.io/anon/pen/aBjqXJ|BOLD|43052|entityMap|0|LINK|mutability|MUTABLE|url|1|http://codepen.io/anon/pen/dvlsG|2|http://codepen.io/anon/pen/aBjqXJ^0|0|0|0|W|0|0|0|K|18|D|0|30|J|0|N|W|1|0|0|0|4|5|C|T|X|2|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@$F|17|G|18|1|19]]|A|$]]|$1|H|3|I|5|6|7|1A|8|@$F|1B|G|1C|J|K]|$F|1D|G|1E|J|K]]|9|@]|A|$]]|$1|L|3|M|5|6|7|1F|8|@$F|1G|G|1H|J|K]]|9|@]|A|$]]|$1|N|3|O|5|6|7|1I|8|@]|9|@$F|1J|G|1K|1|1L]]|A|$]]|$1|P|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1N|8|@$F|1O|G|1P|J|S]|$F|1Q|G|1R|J|K]]|9|@$F|1S|G|1T|1|1U]]|A|$]]|$1|T|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]]|U|$V|$5|W|X|Y|A|$Z|E]]|10|$5|W|X|Y|A|$Z|11]]|12|$5|W|X|Y|A|$Z|13]]]]

<p>rowspan is not avalaible for display:table,<br>
but you can still use it to get close to what you are looking for.<br>
<a href="http://codepen.io/anon/pen/kqDab" rel="nofollow noreferrer">http://codepen.io/anon/pen/kqDab</a><br>
<code>display:inline-table</code> used for the show , so they stand aside each others. you can turn it back to <code>display:table</code>.</p>

<p>Options i see here is to set an height to parent container to have height:XX% avalaible for direct childs element (if it is: float, inline-block, table ...) . 
Other option is vertical-align middle for the cell if <code>display:table-cell;</code>.</p>

<p>You HTML with the same CSS of first demo : <a href="http://codepen.io/anon/pen/dvlsG" rel="nofollow noreferrer">http://codepen.io/anon/pen/dvlsG</a></p>

<hr>

<p><strong>edit</strong> <code>display:flex</code> is also a good option nowdays :<a href="http://codepen.io/anon/pen/aBjqXJ" rel="nofollow noreferrer">http://codepen.io/anon/pen/aBjqXJ</a></p>


blocks|key|2727653|text|<style>
.grid-container+{
+++display:+grid;
}+
</style>
<div+class="grid-container">
+++<div+class="grid-item">1</div>
+++<div+class="grid-item">2</div>
+++<div+class="grid-item">3</div>
+++<div+class="grid-item">4</div>
+++<div+class="grid-item">5</div>
+++<div+class="grid-item">6</div>
+++<div+class="grid-item">7</div>
+++<div+class="grid-item">8</div>
+++<div+class="grid-item">9</div>
</div>+|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2727654|使用显示网格来使用div而不是table|unstyled|2727655|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>&lt;style&gt;
.grid-container {
   display: grid;
} 
&lt;/style&gt;
&lt;div class="grid-container"&gt;
   &lt;div class="grid-item"&gt;1&lt;/div&gt;
   &lt;div class="grid-item"&gt;2&lt;/div&gt;
   &lt;div class="grid-item"&gt;3&lt;/div&gt;
   &lt;div class="grid-item"&gt;4&lt;/div&gt;
   &lt;div class="grid-item"&gt;5&lt;/div&gt;
   &lt;div class="grid-item"&gt;6&lt;/div&gt;
   &lt;div class="grid-item"&gt;7&lt;/div&gt;
   &lt;div class="grid-item"&gt;8&lt;/div&gt;
   &lt;div class="grid-item"&gt;9&lt;/div&gt;
&lt;/div&gt; 
</code></pre>

<p>use display grid for using div instead of table</p>


<p>I am trying to create the following table layout, but I want to use DIV instead of TABLE:</p>

<pre><code>------------------
|       |        |
| CELL1 |  CELL2 |
|       |        |
|       |--------|
|       |        |
|       |  CELL3 |
|       |        |
------------------
</code></pre>

<p>I want the height of all the cells to be set by their content (i.e. no height: style)</p>

<p>I have tried using float:left on cell1, but can't seem to get cells 2 and 3 to behave.</p>

<p><strong>EDIT</strong> 
JS Fiddle here: <a href="http://jsfiddle.net/utZR3/">http://jsfiddle.net/utZR3/</a></p>

<p>HTML:</p>

<pre><code>&lt;div class="list-row"&gt;
    &lt;div class="list-left"&gt;CELL1
    &lt;/div&gt;
    &lt;div class="list-right"&gt;
        &lt;div class="list-title"&gt;CELL2&lt;/div&gt;
        &lt;div class="list-filters"&gt;CELL3

        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="list-row"&gt;
    &lt;div class="list-left"&gt;CELL1
    &lt;/div&gt;
    &lt;div class="list-right"&gt;
        &lt;div class="list-title"&gt;CELL2&lt;/div&gt;
        &lt;div class="list-filters"&gt;CELL3

        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="list-row"&gt;
    &lt;div class="list-left"&gt;CELL1
    &lt;/div&gt;
    &lt;div class="list-right"&gt;
        &lt;div class="list-title"&gt;CELL2&lt;/div&gt;
        &lt;div class="list-filters"&gt;CELL3

        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.list-row {
    background:#f4f4f4;
    border:2px solid red;
}

.list-left {
    width:auto;
    padding:10px;
    top:0px;
    left:0px;
    border: 2px solid blue;
}
.list-right {
    top:0px;
    left:60px;
    padding:10px;
     border:2px solid green;
}
.list-title {

    font-size:18px;
    padding:8px;

}
.list-filters {
    padding:8px;

}
</code></pre>


How to use divs instead of tables

容器

我正在尝试创建以下表布局，但我希望使用DIV而不是表：------------------|       |        || CELL1 |  CELL2 ||       |        ||       |--------||       |        ||       |  CELL3 ||      ...

问如何使用div而不是表
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用div而不是表EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用div而不是表
EN