1

我有三个长度不等的文本列，我想在每列的底部放置一个按钮。我正在寻找一种当前的方法——最好是仅 CSS——定位按钮，以便当列并排（浮动）时它们在页面中的相同垂直位置，然后定位在之后布局为单列时的相关列（在小屏幕上）。我不一定需要列的长度相等，因为它们没有背景，除非这是解决方案的一部分。

这是相关部分的代码/描述：

<div 1 - position:relative>
   <div 2 - display:block;overflow:hidden>
      <div 3 - position:relative; float:left>
         <div 4 - display:block>
            <img src="image1.jpg" />
            <h1>Title 1</h1>
            <p> Column 1 text</p>
         </div 4>
      </div 3>
      <div 3 - position:relative; float:left>
         <div 4 - display:block>
            <img src="image2.jpg" />
            <h1>Title 2</h1>
            <p> Column 1 text</p>
         </div 4>
      </div 3>
      <div 3 - position:relative; float:left>
         <div 4 - display:block>
            <img src="image3.jpg" />
            <h1>Title 3</h1>
            <p> Column 1 text</p>
         </div 4>
      </div 3>
   </div 2>
</div 1>

我已经尝试了很多代码和位置的变化，但我无法让它工作。我还找到了一些解决方案，但它们要么是旧的（回到 IE 5），要么我不知道它们是否相关也许它们是相关的，但我看不到它！）。

在列 div 在全屏上看起来不错之后，将它们放在单独的 div 中，但在小屏幕上，所有按钮都位于最后一列之后。放置在列的开头或结尾使它们根据每列中的文本长度垂直定位。

我试过 position:absolute;bottom:0 将它们放在 div 2 的底部，但效果不佳。非常感谢任何想法/解决方案。

4

2 回答 2

1

我能想到的唯一非 JS 解决方案是将其设为表格。

<table valign=top cellspacing=18px>
<tr>
    <td align=center><h2>Title 2</h2></td>
    <td align=center><h2>Title 2</h2></td>
    <td align=center><h2>Title 3</h2></td>
</tr>
<tr>
    <td valign=top>
        <img src="image1.jpg" />
        Column 1 text
    </td>
    <td valign=top>
        <img src="image2.jpg" />
        You looked me dead in the eye and told me you were dying.<br />
        And then there was no light on the earth.<br />
        But what you saw in me that night was not a light.<br />
        Only Darkness.
    </td>
    <td valign=top>
        <img src="image3.jpg" />
        Column 3 text
    </td>
</tr>
<tr>
    <td align=center><button>Hello</button></td>
    <td align=center><button>There</button></td>
    <td align=center><button>Sir  </button></td>
 </tr>


</table>

这段代码给出了想要的结果，你可以为每个单元格弄乱 css。

否则，您可以div使用 jQuery 或纯 JavaScript 遍历每个元素，找到最大高度，将其存储在变量中，然后循环返回div包含按钮的元素并根据变量设置每个高度。然后position:absolute;bottom:0px;会工作。

于 2013-10-11T02:55:12.607 回答
0

实际上，该表仅适用于更宽的屏幕。很确定它不会将文本流到带有文本部分之间按钮的单列中。我使用 display: 和屏幕宽度媒体查询来交替显示/隐藏两组按钮，一组位于每列之后，一组浮动在位于所有列之后的 div 中。我想我也可以制作两个版本并使用媒体查询根据屏幕宽度显示/隐藏。jsfiddle.net/DTMgJ/5/ 上的 jsfiddle 也使用媒体查询和较大的负边距解决了这个问题。

于 2013-10-12T21:04:18.080 回答