Question

我有一个页面显示另一口井内有3口井。 http://visualhaggard.org/illustrations/2。左侧有一个span5，右侧有跨度7。右边的插图在一个井中，而右边的两个补充物各自都在他们自己的井中。标题部分“其他插图......”不在那些井中。如果我在井内移动集管，那么井就会偏移，底部的顶部约为20px，就像这样：

image of offset wells

以下描述来自我的本地环境，而不是链接中的图片：

井位于正常的自助跨度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">。

如何使我的井垂直对齐

1 个答案: