1

我有三列，其中一列宽度为 50%，另外两列是宽度为 25% 的侧边栏。

HTML

<article></article>
<aside id="s1"></aside>
<aside id="s2"></aside>

CSS

article {
    width:50%; 
    float:left;
}

aside {
    width:25%;
    float:left;
}

维护 HTML 结构，是否有可能以某种方式浮动它们以实现不同的布局 - 我想#s1在文章的左侧和文章#s2的右侧。

这可能与 CSS3 吗？这是上面代码的jsFiddle

4

4 回答 4

2

如果不改变页面的结构，就没有办法做到这一点——CSS 并不意味着用于结构目的。它完全违背了语义标记的原则。

您可以轻松地重新构建页面，如本示例中使用 HTML 更改结构。或者，@sandeep 似乎有一个很好的答案。

于 2012-06-12T10:03:05.260 回答
1

带有 css 的两列表结构示例

#content {

  -webkit-column-count: 2;
  -webkit-column-rule: 1px solid #bbb;
  -webkit-column-gap: 2em;

  -moz-column-count: 2;
  -moz-column-rule: 1px solid #bbb;
  -moz-column-gap: 2em;

  column-count: 2;
  column-rule: 1px solid #bbb;
  column-gap: 2em;


  display: block;
}​

这是一个现场演示。

http://playground.html5rocks.com/#columns

于 2012-08-08T12:01:33.437 回答
0

你可以用display:table这个。像这样写：

article {
    background:#f0f0f0;
    width:50%;
    display:table-cell;
}

aside {
    width:25%;
    display:table-cell;
}

HTML

<aside id="s1"></aside>
<article></article>
<aside id="s2"></aside>

检查这个http://jsfiddle.net/UaFFP/2/

于 2012-06-12T10:04:52.123 回答
0

您希望 S1 位于文章的左侧 - 所以，将其放在首位

<aside id="s1"></aside>

那么文章

<article></article>

然后，在右边 - 你想要“s2” - 所以，把它放在最后

<aside id="s2"></aside>

尽管对 CSS 进行一些更改会很好 - 但它可以在不对 CSS 进行任何更改的情况下工作。

于 2012-06-12T10:08:19.357 回答