我正在尝试开发一个网页，该网页在 div 的左侧有一个表格，然后在右侧显示内容。我有表格设置，但对于我的生活，我无法弄清楚如何在右侧显示其他内容(而不是让它出现在表格下方)。
到目前为止，这是我的代码:http://jsfiddle.net/fZJnp/
我希望有一个可用区域占据“内容”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 似乎可以让我在右侧显示信息和其他元素，但它会弄乱页面上的其他元素。
请让我知道您的想法，希望我能正确解释我的问题。
提前致谢!
最佳答案
我会使用两个 div，一个左边，一个右边。这是我用来让它工作的 HTML 和 CSS。您可能想查看 Twitter 发布的 CSS 框架“Bootstrap”。使用他们预先编写的样式表可以很容易地实现这样的布局。
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;
}
关于html - 在表格右侧显示内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24113714/