Question

所以我正在为我大学的戏剧部门制作网站，我想并排添加3张图片（它们之间有间距）。他们还需要有字幕。但是标题需要有一个标题（其格式与标题本身不同），后跟标题本身。我在这里和其他地方环顾四周，我认为我可以使用表格来做这件事，因为格式化大小最容易这样。我已经在网站的这一部分工作了近一个月，并尝试了许多其他方法（div，表等）我想知道是否有其他人做过这样的事情并且能够传授一些建议。该网站目前位于此处：drama site。任何帮助将不胜感激（我希望这遵循指导方针，第一次提问）

编辑：以下是我需要帮助的部分代码：

＆＃13;

function windowSize() {
  var w = var w = document.getElementById('body').clientWidth;
  document.getElementById('newsTable').style.width = w + 'px';
  document.getElementById('newsItems').style.height = document.getElementById('newsItems').clientWidth + 'px';
}

＆＃13;

<body id="body" onload="windowSize();getCurrentPage();" onresize="windowSize()">
  <table id="newsTable" cellpadding="0" border="0">
    <tr>
      <td id="newsItems" align="center" background="http://i.imgbox.com/5GLGmmDE.gif">1</td>
      <td id="newsItems" align="center" background="http://i.imgbox.com/5GLGmmDE.gif">2</td>
      <td id="newsItems" align="center" background="http://i.imgbox.com/5GLGmmDE.gif">3</td>
    </tr>
    <tr>
      <td id="newsItems" align="center">4</td>
      <td id="newsItems" align="center">5</td>
      <td id="newsItems" align="center">6</td>
    </tr>
  </table>
</body>

＆＃13;

我不希望图片像链接一样大，我希望它们有点小。我还想在他们之间留一些空间。目前，当页面变大时，图像开始重复。如果我把重复关闭，那么它将有通常重复的空白区域

Answer 1

可能最好的选择是使用bootstrap。它可以为你做很多columner工作。但如果这听起来有点复杂，这里有一个简单的小提琴并排三个图像。 http://jsfiddle.net/44uv9a2m/

我只是将图像及其标题包装在div中，然后给它们一个固定的宽度。

.oneThird{
    width:30%;
    float:left;
    margin:.5%;
}
.oneThird img{
    width:100%;
}

<div class="oneThird">
    <img src="http://www.photosnewhd.com/media/images/picture-wallpaper.jpg"></img>
    <p>Caption</p>
</div>
<div class="oneThird">
    <img src="http://www.photosnewhd.com/media/images/picture-wallpaper.jpg"></img>
    <p>Caption</p>
</div>
<div class="oneThird">
    <img src="http://www.photosnewhd.com/media/images/picture-wallpaper.jpg"></img>
    <p>Caption</p>
</div>

*编辑* 这是一个基本的bootstrap示例。 http://www.bootply.com/n6AdJPYIe3

带有图像的HTML表格

1 个答案: