CSS：改变浮动列结构布局？答案

【问题标题】：CSS: change float columns structural layout?CSS：改变浮动列结构布局？
【发布时间】：2023-03-08 22:55:02
【问题描述】：

我有三列，其中一列的宽度为 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 的代码 above

【问题讨论】：

那么在 html 布局中，文章布局应该排在 2 个边线之前？正如已经给出的答案所示，如果第一个旁白先出现，那么格式化旁白非常容易。保持顺序只是为了可读性还是因为模板？
你的 HTML 应该尽可能地反映你的页面结构：<aside id="s1"></aside> 然后<article></article> 最后<aside id="s2"></aside>
我知道它应该反映它我知道它再次符合语义。但是在我的情况下，我正在构建一个响应式网页设计，在移动版本上结构应该是这样的。两个侧边栏位于文章下方是有道理的。然而，在桌面设备和更宽的屏幕上，第一个侧边栏浮动到文章的左侧在语义上也更有意义……这就是我问的原因！
... 这就是我不想更改标记的原因。标记现在的方式是语义的 - 只是在更宽的视口上，以不同的方式浮动它更有意义。

标签： html css css-float

【解决方案1】：

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

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

【讨论】：

好吧，如果不可能，这就是正确答案。要了解我为什么要这样做，只需阅读有关问题本身的 cmets 即可。它与响应式布局有关，在这种布局中以不同的方式浮动它是真正有意义的。但是，如果不可能，那就不可能！
不，对不起！您始终可以使用@media CSS 媒体查询来隐藏元素并在调整大小时重新构建页面......

【解决方案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

【讨论】：

【解决方案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/

【讨论】：

如果我改变了 html 的顺序，我为什么要使用display:table。我可以简单地将它浮动，然后按照我想要的方式。我不想更改标记本身。查看我的 cmets 以了解我不想更改标记的原因。

【解决方案4】：

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

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

然后是文章

<article></article>

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

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

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

【讨论】：