What I have:

I have a primary content area followed by two asides:

我有一个主要内容区域，后跟两个旁边：

<style>
#primary,#secondary,#tertiary{float:left; width:33%;}
</style>

<div id="content" class="site-content">
    <div id="primary" class="content-area">Primary</div>
    <aside id="secondary" class="widget-area" role="complementary">Secondary</aside>    
    <aside id="tertiary" class="widget-area" role="complementary">Tertiary</aside>  
</div>

What I need:

I want an <aside> to each side of the primary content area. E.g. Two sidebars, one to the left and one to the right.

我希望主要内容区域的每一侧都有

What I've tried:

Simply modifying my HTML code by placing #secondary before #primary feels semantically incorrect:

只需在#primary之前放置#secondary来修改我的HTML代码，就会觉得语义不正确：

<style>
#primary,#secondary,#tertiary{float:left; width:33%;}
</style>

<div id="content" class="site-content">
    <aside id="secondary" class="widget-area" role="complementary">Secondary</aside>    
    <div id="primary" class="content-area">Primary</div>
    <aside id="tertiary" class="widget-area" role="complementary">Tertiary</aside>  
</div>

I have attempted using CSS floats but I can't produce the required order #secondary, #primary and #tertiary.

我曾尝试使用CSS浮动，但我无法生成所需的顺序#secondary，＃primary和#tertiary。

My question:

Should I modify the order of my elements using HTML or CSS and if CSS, how might I reorder?

我应该使用HTML或CSS修改元素的顺序，如果是CSS，我该如何重新排序？

https://jsfiddle.net/zLpr8v16/

2 个解决方案

#1

you can do with "flex" and "order". check this fiddle; https://jsfiddle.net/zLpr8v16/2/

你可以用“flex”和“order”来做。检查这个小提琴; https://jsfiddle.net/zLpr8v16/2/

#content{display:flex;}
#primary{order:2; flex:1 0 0;}
#secondary{order:1; flex:1 0 0;}
#tertiary{order:3; flex:1 0 0;}

#2

It would really just be up to your preferences. I feel the CSS route is a little more elegant on the other hand. You could achieve this by using relative positioning and adjusting the left and right positions accordingly

这真的取决于你的喜好。另一方面，我觉得CSS路线更优雅。您可以通过使用相对定位并相应地调整左右位置来实现此目的

Take a look: Fiddle. Of course you can adjust the widths and whatever else as needed.

看看：小提琴。当然，您可以根据需要调整宽度和其他任何内容。

#1