Question

实际上我有这个css for show 2 cols和cols里面按钮到每个col的末尾，这个按钮必须始终显示在col的末尾和col的中心，但是没有得到这个代码工作，也是当我把按钮的宽度放在col的容器的5o％，这显示不好，如果使用像素显示ok，在所有情况下从不在中心，我把我的代码放在这里：

#container
{
position:relative;
width:90%;  
margin:auto;
border:1px solid #111;
overflow:hidden;
text-align:center;  
}

#col
{
display:inline-block;
width:20%;
min-height:300px;
text-align:left;
background-color:red;
margin-bottom:-9000px;
padding-bottom:9000px;
vertical-align:top; 
}

.access
{
position: absolute;
width:50%;
height:35px;
background-color:#111111;
color:#ffffff;
border:0px solid;
bottom:3px; 
}

<div id="container">
<div id="col">
Hi , How Are You ?<br>Hi , How Are You ?<br>Hi , How Are You ?<br>Hi , How Are You ?<br>Hi , How Are You ?<br>Hi , How Are You ?<br>Hi , How Are You ?<br>Hi , How Are You ?<br>Hi , How Are You ?<br>Hi , How Are You ?<br>Hi , How Are You ?<br>Hi , How Are You ?<br>Hi , How Are You ?<br>Hi , How Are You ?<br>Hi , How Are You ?<br>Hi , How Are You ?<br>Hi , How Are You ?<br>Hi , How Are You ?<br>Hi , How Are Youi77 ? Hi , How Are You ?<br>Hi , How Are You ?<br>Hi , How Are You ?<br><br>
<div style="height:40px;"></div>
<input type="submit" name="Access" value="Access Now" class="access" />
</div>
<div id="col">
Hi , How Are You ?<br>Hi , How Are You ?<br>Hi , How Are You ?<br>
<div style="height:40px;"></div>
<input type="submit" name="Access" value="Access Now" class="access" />
</div>
</div>

您可以在此处查看测试：http://jsfiddle.net/Ljzemk11/

Answer 1

我认为您正在尝试将按钮放在每列的底部。

在这种情况下，position:relative需要在.col CLASS上（因为您无法在页面上重复使用ID 。

#container {
  position: relative;
  width: 90%;
  margin: auto;
  border: 1px solid #111;
  overflow: hidden;
  text-align: center;
}
.col {
  display: inline-block;
  width: 20%;
  min-height: 300px;
  text-align: left;
  background-color: red;
  vertical-align: top;
  position: relative;
}
.access {
  position: absolute;
  width: 80%;
  margin: 0 10%;
  height: 35px;
  background-color: #111111;
  color: #ffffff;
  border: 0px solid;
  bottom: 3px;
  z-index: 3;
}

<div id="container">
  <div class="col">Hi , How Are You ?


    <div style="height:40px;"></div>
    <input type="submit" name="Access" value="Access Now" class="access" />
  </div>
  <div class="col">Hi , How Are You ?
    <br>Hi , How Are You ?
    <br>Hi , How Are You ?
    <br>
    <div style="height:40px;"></div>
    <input type="submit" name="Access" value="Access Now" class="access" />
  </div>
</div>

将中心对准相对容器位置

1 个答案: