Question

我正在使用Zurb Foundation 6.我有一行有2列，如下：

<div class="row">
   <div class="columns medium-4 left-col">
     Left column.
   </div>
   <div class="columns medium-8 right-col">
     Right column. Needs to reach far right hand side of screen.
   </div>
</div>

当然，基金会.row的最大宽度为75rem，这意味着如果屏幕大于75rem，那么任何一侧都会有边距。那没关系，我想离开那个。但是，我希望右侧列一直向右延伸，传递75rem宽度。

换句话说，我想尝试让左列的行为类似于max-width: 75rem;包裹行，但右列的行为类似于max-width: 100%;包裹行。

有关详细信息，请参阅此处：https://jsfiddle.net/u4x5owc0/11/

有没有办法实现这个目标（有了基金会）？

我已经尝试制作了正确的列position: absolute; width: 100%;，但也只是覆盖了左侧。

有人知道这是否可行，如果有办法做到这一点？

Answer 1

我不认为基金会有此功能，但在右栏中使用position: absolute; right: 0;为我工作。

Updated fiddle

Answer 2

您应该使用.right-col{position: absolute; right: 0;}。但它不会支持小型设备。您应该使用@media查询来进行响应。请检查DEMO它是否正常运行并具有响应性。

.left-col, .right-col {
  height: 40vh;
  color: white;
  margin-bottom: 20px;
}

.left-col {
  background: green;
}

.right-col {
  background: red;
}
@media(min-width:640px){
  .right-col{
    position: absolute;
    right: 0;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet"/>
<div class="row">
<div class="columns medium-4 left-col">
</div>
<div class="columns medium-8 right-col">
Needs to reach far right hand side of screen. ==>
</div>
</div>

<div class="row expanded">
<div class="columns medium-4 left-col">
  Needs to remain the same width as above. 
</div>
<div class="columns medium-8 right-col">
</div>
</div>

有没有办法让基础列超出它的行的边界？

2 个答案: