如何在表外写内容

Question

我想在wordpress网站上创建一个表格。我想把桌子放在右边。问题是，如果我想在桌子的左侧写内容，那我该怎么办呢。你能举个例子吗？

我是css的初学者，所以请原谅我的写作风格。

我想为网站制作一种风格（我附上的图片）。你能帮帮我，我怎么能在桌子的左边自由写作？

Answer 1

使用position: absolute：

#navbar {
    position: absolute; left: 0;
    width: 20%;
}

#content {
    position: absolute; right: 0; /*Presuming this is the table*/
}

Answer 2

你应该看一下css的display属性，它主要用于对齐网页上的内容。

http://www.w3schools.com/cssref/pr_class_display.asp

你的意思是内容div中的表格？

#content {
  margin-left:20%;
}
#navbar {
 float: left;
 width: 20%;
}    
.table-wrapper {
   display:inline-block;
}

<div id="layout">
  <div id="header">Top Header</div>
  <div id="navbar">Navigation</div>
    <div id="content">
        <div class="table-wrapper">
            <table><tr><td>table 1</td></tr></table>            
        </div>
        <div class="table-wrapper">
            <table><tr><td>table 2</td></tr></table>            
        </div>
    </div>
  <div id="footer">Bottom Footer</div>
</div>

http://jsfiddle.net/KhH42/1/

Answer 3

这样的东西？

#wrapper {
    border:solid 2px #000;
    margin:20px;
}
#wrapper div[class*="col-"]{
    float:left;
}    
.col-1 { width:30%; background:#eee; }
.col-2 { width:30%; background:#e2e2e2; }
.col-3 { width:40%; background:#ccc; }    
#wrapper:after { content:""; clear:both; display:block; }

<div id="wrapper">
    <div class="col-1">
        <p>col 1 content</p>
    </div>
    <div class="col-2">
        <p>col 2 content</p>
    </div>
    <div class="col-3">
        <table>
            <tr>
                <td>
                    my table
                </td>
            </tr>
        </table>
    </div>
</div>

http://jsfiddle.net/3LUqg/