Question

我有三列，其中一列是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吗？这是代码above

的jsFiddle

Answer 1

如果不改变页面结构就无法做到 - CSS并不意味着用于结构目的。它完全违背了语义标记的原则。

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

Answer 2

带有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

Answer 3

您可以使用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/

Answer 4

您希望S1位于文章的左侧 - 因此，请先放置

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

然后是文章

<article></article>

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

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

虽然对Css的一些更改会很好 - 但它可以在不对css进行任何更改的情况下工作。

CSS：更改浮点列结构布局？

4 个答案: