Question

好的，所以我想在布局的左侧移动一个侧边栏。

但是，我还希望在HTML中首先保留前3个元素的顺序，然后将侧边栏作为第4个元素移动到左侧并对齐到页面顶部。

这是一个小学术，可能纯粹是为了搜索引擎优化目的。

下面我是无名基金会标记。

<div class="row">
<div class="small-9 push-3 columns"> main content </div>
<div class="small-9  push-3 columns"> main content </div>
<div class="small-9  push-3 columns"> main content </div>
<div class="small-3 pull-9 columns end" > left sidebar </div> 
</div>

目前，我有2行有3列空白空间，然后左侧的侧栏与第3行对齐。我虽然“结束”属性会将它浮动到左边然后向上但是......

任何可以让我了解解决方案的人都会感谢你。

CSS

[class*="column"] + [class*="column"]:last-child {
 float: right; }

 .row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 62.5rem; }

.columns {
position: relative;
padding-left: 0.9375rem;
padding-right: 0.9375rem;
float: left; }

.small-9 {
width: 75%; }
.small-3 {
width: 25%; }

@media only screen {
 .small-push-0 {
   position: relative;
   left: 0%;
   right: auto; }

 .small-pull-0 {
   position: relative;
   right: 0%;
   left: auto; }
}


[class*="column"] + [class*="column"].end {
  float: left; }

干杯，贾斯汀

Answer 1

您可以使用float: left;替换columns课程中的display: inline;，以便列只显示为另一个列，并且不会向任何方向拉，您可以为end类添加css，将最后一列拖到左侧

HTML与您的相同，但CSS将如下所示

.columns {
    position: relative;
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
    display: inline;
}

.end {
    float: left;
}

CSS中的其他所有内容都保持不变。

这是最终结果的Jsfiddle：fiddle

我刚刚意识到我的代码将同一行中的所有div对齐，而您的代码将所有的代码对齐在另一行之下。从问题来看，如果你想让前3个div与另一个相邻（我从你的CSS代码中假设），那么它（至少对我来说）不是很清楚，或者最后一个在左边，最后一个在右边，另一个在另一个之下。如果您正在寻找我提出的第二种情况的解决方案，请添加评论，以便我可以更改我的代码。

更新

在查看解释的请求后，我想出了这些更改

需要

CSS 代码：

.arange_to_left {
    float: left;
    width: 25%;
}
.arange_to_right {
    width: 70%;
    float: right;
}
.columns {
    position: relative;
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
    padding-bottom: 10px;
}
.row {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    max-width: 62.5rem;
}

HTML 代码需要（和简化）：

<div class="row">
    <div class="arange_to_right">
        <div class="small-9 push-3 columns">1. Something</div>
        <div class="small-9  push-3 columns">2. Something else</div>
        <div class="small-9  push-3 columns">3. Anything else</div>
    </div>
    <div class="arange_to_left small-3 pull-9 columns">SIDE BAR</div>
</div>

以下是它的外观：result

请注意，我在左右div之间留了一个小房间。这不是必需的，但我留下它来补偿您可能想要添加的可能的边框，边距和填充。显然，您可以将左右div的%更改为您想要/需要的内容。

此外，这不会扩展您的row div以包围其他div，因为它们是浮动的。我已经设置了this小提琴，以展示如何扩展围绕它的内容。（这个小提琴也有完整的演示文字和边框绘制）

对于最后一个例子，我确实为end添加了CSS，并在row的末尾创建了一个空div（但仍在其中）

.end {
    clear: both;
}

Answer 2

所以我可能找到了你想要的解决方案。这一切都是通过直接css和html完成的。你想要每排一个左侧杆还是一个左侧杆？每行示例是第一个。左边的那个是第二个。

每行： http://jsfiddle.net/75WA9/

左边一个： http://jsfiddle.net/UPpDS/

推拉类中间

2 个答案: