0

我有一个问题，我有我的网站：yusifmusic.com，以便链接（传记、旅游历史等）位于下拉列表中。但是，如您所见，一旦文本超出左列，它就会开始延伸到左列。一种解决方法是在代码中添加大量中断（在 p 和 end span 标签之间，靠近底部）。但是，这会在页面底部增加很多空白空间。我相信一定有更好的解决方案。我尝试使用样式使表格高度 = 100%，但没有运气。只是想让这个左列表格的高度延伸到无穷大，这样这个网页上的中心文本就会在显示时缩进。它现在的样子真的很草率......我该怎么做？ 

<table bgcolor="#000000" width="200" border="0" align="left" cellpadding="35";>
<tr><td>
<div align="center">
<span style="font-size: 12pt">
<u>Tour Dates:</u><p></span>
<span style="font-size: 8pt">
<P>  
2/26 - 50 Mason Social House - San Francisco, CA<br><br>
etc... <br><br>
<p>


</span>
</td></tr>
</table>




<P><br><br><br>
<p>

<div align="center" class="geo">

CONTACT: <a href="mailto:booking@yusifmusic.com">booking@yusifmusic.com</a> etc etc

<br>
<br>

<script language="javascript"> 
function toggleBio() {
var ele = document.getElementById("toggleBio");
var text = document.getElementById("displayBio");
if(ele.style.display == "block") {
        ele.style.display = "none";
    text.innerHTML = "BIOGRAPHY";
}
else {
    ele.style.display = "block";
    text.innerHTML = "hide";
}
} 
</script>

<font size = "4"><center>
<a id="displayBio" href="javascript:toggleBio();">BIOGRAPHY</a> </center></font>

<div id="toggleBio" style="display: none">

<center><b>Yusif!</b></center>
<center><i>Yusif!</i> (self-released)</center>
<center><u>Biography</u></center>
<p>
<p align="left">
"Sometimes our most destructive moments... etc etc<br><br>
4

1 回答 1

0

我个人发现处理表格来设计网站布局通常很痛苦，因此通常很多 Web 开发正在从表格转向 div 标签、类和样式表。

我知道这对您的问题来说不是一个小的直接解决方案，但我认为您可以轻松地将其中的很多内容移至 Bootstrap.js 以非常快速轻松地解决此问题。

http://twitter.github.com/bootstrap/scaffolding.html

特别是，您可以使用脚手架创建三个“列”或垂直部分，您可以将现有代码插入其中。

假设您在页面的其余部分正确使用引导程序，则分隔符将用于底部，如下所示：

<div class="row">
   <div class="span4">...Tour Dates Code...</div>
   <div class="span4">...Middle Column Code Contact....Bio....</div>
   <div class="span4">...Code for The Red Column...</div>
</div>

另一件可能更快的解决方法是将整个底部包含在一个“父表”中。您可以自己玩弄单元格宽度和百分比。将代码放在父表中将有助于这些部分保留其形式。

<table bgcolor="#000000" width="100%" border="0" > 
    <tr>
        <td>....Insert left table that has bgcolor="#00000" and cellpadding="35" </td>
    </tr>
    <tr>
        <td>...Insert Center Code here....</td>
    </tr>
    <tr>
        <td>...Insert right table that has cellpadding="8" and bgcolor="#550000"...</td>
    </tr>
</table>

您可以在此处阅读有关表格的更多信息：http: //www.w3schools.com/html/html_tables.asp和其他在线位置。

我还建议从表格中删除对齐标签，并管理宽度并从父单元格容器中定位它们。

于 2013-01-30T14:01:44.913 回答