Question

我创建了一个自适应网页，其中包含一个样式化的ul选择器，用于提供多窗格视图。

<ul class="threepane">
    <li>
        <h3>Section 1</h3>
        <p>Foo <br /> bar <br /> baz </p>
        <a href="x.html" class="button">More</a>
    </li>
    <li>
        <h3>Section 2</h3>
        <p>Foo <br/> bar </p>
        <a href="y.html" class="button">More</a>
    </li>
    <li>
        <h3>Section 3</h3>
        <p>Foo</p>
        <a href="z.html" class="button">More</a>
    </li>
</ul>

我现在不会发布整个造型，以免弄乱帖子。如果我应该这样做，请告诉我。现在看起来像这样：

唯一的问题是按钮的位置 - 我希望它们在一个高度。所以我将这些选择器添加到我的样式

#about {
    position: relative; 
}

 #about .button {
      position: absolute;
      bottom: 0; 
 }

不幸的是，现在按钮没有居中（按钮的左边框位于窗格的中央）。当然，如果窗格显示在另一个窗格之上，则所有按钮都显示在同一个位置。

另一方面，如果我将#about选择器更改为#about ul或#about li，ul块会缩小，按钮对齐得太高。

我想要的是：所有按钮都应该在一行中，按钮最靠近底部。在这种情况下：将第二个和第三个按钮的高度对齐到第一个按钮（但我不想硬编码第一个窗格是最长的）

我怎样才能实现它？

Answer 1

您可以使用下面的flexbox。它支持IE10以后。

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	
	box-sizing: border-box; 
}
.threepane {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.threepane li {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
          background: yellow;
          position: relative;
  
}
.threepane li p {
  margin-bottom: 30px;
}
.threepane li a {
  position: absolute;
  bottom: 5px;
}

<ul class="threepane">
    <li>
        <h3>Section 1</h3>
        <p>Foo <br /> bar <br /> baz </p>
        <a href="x.html" class="button">More</a>
    </li>
    <li>
        <h3>Section 2</h3>
        <p>Foo <br/> bar </p>
        <a href="y.html" class="button">More</a>
    </li>
    <li>
        <h3>Section 3</h3>
        <p>Foo</p>
        <a href="z.html" class="button">More</a>
    </li>
</ul>

Answer 2

您可以将position: relative添加到ul而不是li，并获得所需的结果

<强> HTML

<ul class="threepane">
    <li>
        <h3>Section 1</h3>
        <p>Foo <br /> bar <br /> baz </p>
        <a href="x.html" class="button">More</a>
    </li>
    <li>
        <h3>Section 2</h3>
        <p>Foo <br/> bar </p>
        <a href="y.html" class="button">More</a>
    </li>
    <li>
        <h3>Section 3</h3>
        <p>Foo</p>
        <a href="z.html" class="button">More</a>
    </li>
</ul>

<强> CSS

.button {
      position: absolute;
      bottom: 0; 
 }

li {
  width: 32%;
  float: left;
  height: 100%;
}

.threepane {
  overflow: hidden;
  position: relative;
}

示例：http://jsbin.com/xatihoneze/edit?html,css,output

Answer 3

试试这个：

<style>
li{
position:relative;
text-align:center;
display: inline-block;
height: 150px;
overflow-y: auto;
}

li p{
display:block;
width:100px;
height:100px;
overflow: auto;
}

li .button{
position: absolute;
bottom:0;
margin: 0 auto;
}

Answer 4

Flexbox可以执行定位任何。

.threepane { display: flex; margin: 0; } li { flex: 1; display: flex; flex-direction: column; border: 1px solid grey; padding: 1em; } li a { margin-top: auto; align-self: center; }

<ul class="threepane"> <li> <h3>Section 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae dolor laboriosam modi ab inventore voluptatum labore quae reiciendis odit totam cum alias quidem minima obcaecati atque ip.</p> <a href="x.html" class="button">More</a> </li> <li> <h3>Section 2</h3> <p>Foo <br/>bar</p> <a href="y.html" class="button">More</a> </li> <li> <h3>Section 3</h3> <p>Foo</p> <a href="z.html" class="button">More</a> </li> </ul>

将元素与父级底部对齐

4 个答案: