我正在尝试开发一个网页，其中有一个表格在div的左侧运行，然后在右侧显示内容。我有桌面设置，但对于我的生活，我无法弄清楚如何在右边显示其他内容（并没有显示在表格下方）。
到目前为止，我的代码是：http://jsfiddle.net/fZJnp/
我希望有一个可用的区域占用内容中的剩余宽度＆＃39; DIV。
这是分别应用于内容div和表的css：
#content {
margin: 0 auto;
width:50%;
height:auto;
border:solid 1px #003366;
background-color:#FFF;
padding:10px;
-webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.75), 0px -1px 2px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.75), 0px -1px 2px 0px rgba(0,0,0,0.75);
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.75), 0px -1px 2px 0px rgba(0,0,0,0.75);
}
table {
border-collapse: collapse;
background:#EEE;
color:#111;
}
Float：left，当应用于表格时，似乎让我在右边显示信息和其他元素，但它会弄乱页面上的其他元素。
请让我知道你的想法，希望我能正确解释我的问题。
提前致谢！
答案 0 :(得分：1)
我会使用两个div，左边和右边。这是我用来使其工作的HTML和CSS。您可能想要查看CSS框架＆＃34; Bootstrap，＆＃34;由Twitter发布。使用预先编写的样式表可以很容易地实现这样的布局。
HTML：
<body>
<div id="left">
<table>
<thead>
<tr>
<th>Type</th>
<th>Destination</th>
</tr>
</thead>
<tbody>
<tr>
<td>A239</td>
<td class="Lowsec">Lowsec</td>
</tr>
<tr>
<td>A641</td>
<td class="Highsec">Highsec</td>
</tr>
<tr>
<td>A982</td>
<td class="C6">C6</td>
</tr>
<tr>
<td>B041</td>
<td class="C6">C6</td>
</tr>
<tr>
<td>B274</td>
<td class="Highsec">Highsec</td>
</tr>
<tr>
<td>B449</td>
<td class="Highsec">Highsec</td>
</tr>
<tr>
<td>C125</td>
<td class="C2">C2</td>
</tr>
<tr>
<td>C140</td>
<td class="Lowsec">Lowsec</td>
</tr>
<tr>
<td>C247</td>
<td class="C3">C3</td>
</tr>
<tr>
<td>C248</td>
<td class="Nullsec">Nullsec</td>
</tr>
<tr>
<td>C391</td>
<td class="Lowsec">Lowsec</td>
</tr>
<tr>
<td>D364</td>
<td class="C2">C2</td>
</tr>
<tr>
<td>D382</td>
<td class="C2">C2</td>
</tr>
<tr>
<td>D792</td>
<td class="Highsec">Highsec</td>
</tr>
<tr>
<td>D845</td>
<td class="Highsec">Highsec</td>
</tr>
<tr>
<td>E175</td>
<td class="C4">C4</td>
</tr>
<tr>
<td>E545</td>
<td class="Nullsec">Nullsec</td>
</tr>
<tr>
<td>G024</td>
<td class="C2">C2</td>
</tr>
<tr>
<td>H121</td>
<td class="C1">C1</td>
</tr>
<tr>
<td>H296</td>
<td class="C5">C5</td>
</tr>
<tr>
<td>H900</td>
<td class="C5">C5</td>
</tr>
<tr>
<td>I182</td>
<td class="C2">C2</td>
</tr>
<tr>
<td>J244</td>
<td class="Lowsec">Lowsec</td>
</tr>
<tr>
<td>K162</td>
<td class="Generic Exit">Generic Exit</td>
</tr>
<tr>
<td>K329</td>
<td class="Nullsec">Nullsec</td>
</tr>
<tr>
<td>K346</td>
<td class="Nullsec">Nullsec</td>
</tr>
<tr>
<td>L477</td>
<td class="C3">C3</td>
</tr>
<tr>
<td>L614</td>
<td class="C5">C5</td>
</tr>
<tr>
<td>M267</td>
<td class="C3">C3</td>
</tr>
<tr>
<td>M555</td>
<td class="C5">C5</td>
</tr>
<tr>
<td>M609</td>
<td class="C4">C4</td>
</tr>
<tr>
<td>N062</td>
<td class="C5">C5</td>
</tr>
<tr>
<td>N110</td>
<td class="Highsec">Highsec</td>
</tr>
<tr>
<td>N290</td>
<td class="Lowsec">Lowsec</td>
</tr>
<tr>
<td>N432</td>
<td class="C5">C5</td>
</tr>
<tr>
<td>N766</td>
<td class="C2">C2</td>
</tr>
<tr>
<td>N770</td>
<td class="C5">C5</td>
</tr>
<tr>
<td>N968</td>
<td class="C3">C3</td>
</tr>
<tr>
<td>N944</td>
<td class="Lowsec">Lowsec</td>
</tr>
<tr>
<td>O128</td>
<td class="C4">C4</td>
</tr>
<tr>
<td>O477</td>
<td class="C3">C3</td>
</tr>
<tr>
<td>O883</td>
<td class="C3">C3</td>
</tr>
<tr>
<td>P060</td>
<td class="C1">C1</td>
</tr>
<tr>
<td>Q317</td>
<td class="C1">C1</td>
</tr>
<tr>
<td>R051</td>
<td class="Lowsec">Lowsec</td>
</tr>
<tr>
<td>R474</td>
<td class="C6">C6</td>
</tr>
<tr>
<td>R943</td>
<td class="C2">C2</td>
</tr>
<tr>
<td>S047</td>
<td class="Highsec">Highsec</td>
</tr>
<tr>
<td>S199</td>
<td class="Nullsec">Nullsec</td>
</tr>
<tr>
<td>S804</td>
<td class="C6">C6</td>
</tr>
<tr>
<td>T405</td>
<td class="C4">C4</td>
</tr>
<tr>
<td>U210</td>
<td class="Lowsec">Lowsec</td>
</tr>
<tr>
<td>U319</td>
<td class="C6">C6</td>
</tr>
<tr>
<td>U574</td>
<td class="C6">C6</td>
</tr>
<tr>
<td>V283</td>
<td class="Nullsec">Nullsec</td>
</tr>
<tr>
<td>V301</td>
<td class="C1">C1</td>
</tr>
<tr>
<td>V753</td>
<td class="C6">C6</td>
</tr>
<tr>
<td>V911</td>
<td class="C5">C5</td>
</tr>
<tr>
<td>W237</td>
<td class="C6">C6</td>
</tr>
<tr>
<td>X702</td>
<td class="C3">C3</td>
</tr>
<tr>
<td>X877</td>
<td class="C4">C4</td>
</tr>
<tr>
<td>Y683</td>
<td class="C4">C4</td>
</tr>
<tr>
<td>Y709</td>
<td class="C1">C1</td>
</tr>
<tr>
<td>Z060</td>
<td class="Nullsec">Nullsec</td>
</tr>
<tr>
<td>Z142</td>
<td class="Nullsec">Nullsec</td>
</tr>
<tr>
<td>Z457</td>
<td class="C4">C4</td>
</tr>
<tr>
<td>Z647</td>
<td class="C1">C1</td>
</tr>
<tr>
<td>Z971</td>
<td class="C1">C1</td>
</tr>
</tbody>
</table></div><div id="right"><p>This is test content</p></div>
</div>
</body>
CSS：
@font-face {
font-family: 'Myriad Pro Regular';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff');
}
html {
font-family:'Myriad Pro Regular';
font-weight:normal;
background-color:#CCC;
}
@font-face {
font-family: 'Myriad Pro Regular';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff');
}
#left {
float:left;
width:50%;
}
#right {
float:right;
width:50%;
}
table {
border-collapse: collapse;
background:#EEE;
color:#111;
}
th, td {
border: solid 1px #222;
padding:5px;
}
tr:hover {
background:#CCC;
}
tr.highlight {
background:yellow;
}
td.Highsec, td.C1, td.C2 {
background-color:#468966;
}
td.Lowsec, td.C3, td.C4 {
background-color:#FFB03B;
}
td.Nullsec, td.C5, td.C6 {
background-color:#8E2800;
}
答案 1 :(得分：0)
你可以像this
那样做HTML
<div id="content">
<div class="leftBar">
<!- your table goes here -->
</div>
<div class="rightCnt">
test test test tset
</div>
<div class="clear"></div>
</div>
CSS
.leftBar {
float: left;
}
.rightCnt {
margin-left: 150px
}
.clear {
clear: both
}