用div而不是表格布局 [英] Layout with divs instead of table

问题描述

我想知道用什么方法将表格布局替换为div。我一直在尝试一些自己，但它非常困扰我的4x4 divs。我猜这是不是很难完成，当有经验做这样的事情，但我都是新来的divs，并试图学习这一点：）

看看这个，并分享你的意见，如果该表应该保持原样，或者应该用div替换： http ：//jsfiddle.net/CZdux/

 < table align =centerborder =0 > 
< tr> 
< td width =430rowspan =3> 
< div class =container> 
< div id =a1class =card>< / div> 
< div id =a2class =card>< / div> 
< div id =a3class =card>< / div> 
< div id =a4class =card>< / div> 
< div id =a5class =card>< / div> 
< div id =a6class =card>< / div> 
< div id =a7class =card>< / div> 
< div id =a8class =card>< / div> 
< div id =a9class =card>< / div> 
< div id =a10class =card>< / div> 
< div id =a11class =card>< / div> 
< div id =a12class =card>< / div> 
< div id =a13class =card>< / div> 
< div id =a14class =card>< / div> 
< div id =a15class =card>< / div> 
< div id =a16class =card>< / div> 
< / div> 
< / td> 
< td width =161height =95align =centervalign =middle> LOGO< / td> 
< / tr> 
< tr> 
  

解决方案

浮动列 p>

在这种情况下，不需要HTML表格。

HTML表格适用于数据网格，但对于一般布局（建立列和类似）浮动几乎总是最好的选择（如@GrantMynott建议）。尽管此页面上的卡片以网格模式显示，但它并不是一个真正的数据网格。

如果您将CSS添加到CSS文件中，可以极大地简化使用的花车（并创建列）。每次你有一个带有浮动列的容器，你都可以将clearfix类添加到容器中。那么你不必担心清理浮动列的细节。

下面是一个例子，使用传统版本的clearfix（这是一个很好的版本来启动）：
$ b $ pre code $ /传统的clearfix * /
.clearfix：在{
content：之后。 ;
display：block;
height：0;
明确：两者;
可见性：隐藏;
}
.clearfix {display：inline-block;}
* html .clearfix {height：1％;}
.clearfix {display：block;}

/ *为页面布局定制CSS * /
.columns .column1 {
float：left;
width：430px;
}
.columns .column2 {
float：left;
width：161px;
}
....
< div class =columns clearfix>
< div class =column1>卡网格在这里...< / div>
< div class =co1umn2>卡网格右侧的所有内容都在这里...< / div>
< / div>
< div id =msg>< / div>

此示例使用CSS类的通用名称（columns，column1，column2） 。可以根据需要使用对页面更有意义的名称。

更新

查看您的修订版演示后：

• 类名称为co12的拼写错误阻止了该列我将名称更新为column2，以减少打印错误的可能性。


• 在卡片容器中添加一个clearfix是一个好主意（因为只是为了安全起见，目前，卡片容器是左侧列，所以它会被添加到那里。


• 这可能是个人喜好，但我发现将所有列浮动到相同方向（通常是左侧）要稍微安全一些，而不是混合左侧浮动和右侧浮动。在同一个容器中混合方向在某些情况下并不稳定（ Ø至少在旧浏览器上是这样），但在大多数情况下，这样做是安全的。
/jsfiddle.net/Matt_Coughlin/RqSL9/2/rel =nofollow>更新了演示




此时，您只需添加高度或垂直边距（或填充）到右侧列中的内容。我在徽标图片周围添加了一个div容器，以使其更容易一些。可以有选择地在按钮周围有一个div容器，尽管你可以在没有一个的情况下管理它。




I'm wondering what way would be best in replacing the table-layout to divs. I've been trying some myself but it messed up my 4x4 divs very much. I'm guessing this isn't very hard to accomplish when having the experience to do such things but I'm all new to divs and trying to learn this :)

Take a look at this and share your opinions on if the table should stay as it is or if it should be replaced with divs: http://jsfiddle.net/CZdux/

<table align="center" border="0">
  <tr>
    <td width="430" rowspan="3">    
        <div class="container">
            <div id="a1" class="card"></div>
            <div id="a2" class="card"></div>
            <div id="a3" class="card"></div>
            <div id="a4" class="card"></div>
            <div id="a5" class="card"></div>
            <div id="a6" class="card"></div>
            <div id="a7" class="card"></div>
            <div id="a8" class="card"></div>
            <div id="a9" class="card"></div>
            <div id="a10" class="card"></div>
            <div id="a11" class="card"></div>
            <div id="a12" class="card"></div>
            <div id="a13" class="card"></div>
            <div id="a14" class="card"></div>
            <div id="a15" class="card"></div>
            <div id="a16" class="card"></div>
        </div>   
    </td>
    <td width="161" height="95" align="center" valign="middle">LOGO</td>
  </tr>
  <tr>

解决方案

Floated columns

There's no need for an HTML table in this case.

HTML tables are appropriate for data grids, but for general layout (establishing columns and such) floats are almost always the best option (as @GrantMynott suggested). Although the cards on this page appear in a grid pattern, it's not really a data grid.

If you add a clearfix to your CSS file, you can greatly simplify the use of floats (and creating columns). Everytime you have a container with floated columns, you add the clearfix class to the container. Then you don't have to worry about the details of clearing the floated columns.

Here's an example, using a traditional version of clearfix (which is a good version to start with):

/* Traditional clearfix */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

/* Custom CSS for the page layout */
.columns .column1 {
    float: left;
    width: 430px;
}
.columns .column2 {
    float: left;
    width: 161px;
}
....
<div class="columns clearfix">
    <div class="column1">Card grid goes here...</div>
    <div class="co1umn2">All content to the right of card grid goes here...</div>
</div>
<div id="msg"></div>

This example uses generic names for the CSS classes ("columns", "column1", column2"). Names that are more meaningful for the page in question can be used as needed.

Update

After looking at your revised demo:

• There was a typo with the class name "co12" that was preventing that column from being floated. I updated the name to "column2", to make that sort of typo less likely.
• It's a good idea to add a clearfix to the cards container as well (since the cards are floated), just to be safe. At present, the cards container is the left-hand column itself, so it would be added there.
• This may be a personal preference, but I've found it to be slightly safer to float all columns in the same direction (usually left), than to have a mix of some floated left and some floated right. Mixing directions in the same container is not as stable in some cases (or at least, on older browsers), though in most cases it's safe to do so.

Updated demo

At this point, you just need to add heights or vertical margins (or padding) to the content in the right-hand column. I added a div container around the logo image, to make this a little easier. There could optionally be a div container around the button too, though you could probably manage without one.

这篇关于用div而不是表格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！