Question

我遇到了问题，我有我的网站：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>

Answer 1

我个人发现，处理表格以设计网站布局通常很痛苦，因此通常很多网页开发都会从表格转移到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和其他在线地点。

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

如何使桌子高度100％？

1 个答案: