元素顺序应该由HTML还是CSS确定？

Question

我拥有的：

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

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

我需要什么：

我希望主要内容区域的每一侧都有<aside>。例如。两个侧边栏，一个在左边，一个在右边。

我尝试了什么：

在#secondary #primary之前放置<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> 只是在语义错误时修改我的HTML代码：

#secondary

我尝试过使用CSS浮动，但我无法生成所需的订单#primary，#tertiary和{{1}}。

我的问题：

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

https://jsfiddle.net/zLpr8v16/

Answer 1

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

#include <iostream>
using namespace std;

class Byte
{   
    public:
        Byte(bool[], int);
        ~Byte() {delete[] itsBits;}

        bool& operator[](int);

    private:

        bool* itsBits;
        int  itsLength;
};

Byte::Byte(bool bits[], int length) : 
    itsLength(length)
{
    itsBits = new bool[itsLength];
    for(int i(0); i < itsLength; i++)
        itsBits[i] = bits[i];
}

bool& Byte::operator [](int index)
{
    if(index < 0 || index > itsLength)
        return itsBits[0];
    else
        return itsBits[index];
}

int main()
{

    bool bArray[] = {true, false, true, true, false, true, false, true};
    Byte theByte(bArray, 8);

    cout << theByte[2] << endl;

    theByte[2] = false; // invoking bool& operator[] it returns a reference the 3rd element in array so we can assign to it value

    cout << theByte[2] << endl;
    cout << theByte[6] << endl; 

    for(int i(0) ; i < 8; i++)
        cout << theByte[i] << " "; 

    cout << endl << endl << endl;
    return 0;
}

Answer 2

这实际上取决于您的偏好。另一方面，我觉得CSS路线更优雅。您可以使用relative定位并相应调整left和right位置来实现此目的

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