css - 如何让我的井垂直对齐

Question

我有一个页面显示了另一个井中的 3 个井。 http://visualhaggard.org/illustrations/2 .左边有span5，右边有span 7。右边的插图在一个孔中，而右边的 2 个补充剂各在一个孔中。标题部分“其他插图...”不在那些井中。如果我在井内移动标题，井将与底部井偏移顶部井的右侧约 20 像素，如下所示:

以下描述来 self 的本地环境，并非链接中的图片:

井位于正常的引导范围内7

这是补充井的样式:

.well-associated-thumbnails {
  height:250px;
  overflow:auto;
  background-color: white;
  border-style: solid;
  border_color: black;
}

这是来自顶部井的代码:

<div class="span12 well-associated-thumbnails">
    <h5>Other Illustrations from <%= @novel_name %></h5>
    <% @related_illustrations_by_novel.each_slice(4) do |set| %>
      <div class="row-fluid">
        <% set.each do |illustration| %>
          <div class="span3 ">
            <div align="center"><%= link_to image_tag(illustration.aws_image_thumbnail_url), illustration %>
                <br />
                <span style="font-size:x-small;">
                    <%= illustration.short_name %>
                </span>
                <br />
            </div>
            <br />
          </div>
        <% end %>
      </div>
      <br />
    <% end %>
</div>

这是底部的井:

<div class="span12 well-associated-thumbnails">
    <h5>Other Illustrations with similar Tags:</h5>
    <% @related_illustrations_by_tags.each_slice(4) do |set| %>
        <div class="row-fluid">
            <% set.each do |illustration| %>
                <div class="span3 ">
                    <div align="center"><%= link_to image_tag(illustration.aws_image_thumbnail_url), illustration %>
                        <br />
                        <span style="font-size:x-small;">
                            <%= illustration.short_name %><br />
                            <%= link_to illustration.edition.novel.name, illustration.edition.novel %><br />
                        </span>
                    </div>
                <br />
                </div>
            <% end %>
        </div>
        <br />
    <% end %>
</div>

任何人都可以告诉我为什么当我把标题放在井里时井会弄乱吗？谢谢。

Answer 1

我只是改变了<div class="span12 well-associated-thumbnails">至 <div class="well well-associated-thumbnails">在必要的位置。