Question

我有四个元素，其中三个我希望与下面的页脚并排。我现在遇到的问题是获取我想要的订单而不改变任何HTML（例如订单）。

我目前有这段代码：

＆＃13;

    <!DOCTYPE html>
    <html>
    <head>
        <title>Hello ReactJS!</title>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
        <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <script type="text/jsx" src="qaapp.js"></script>
    </head>
    <body>
    <div id="content" class="container"></div>
    <script type="text/jsx">


    var test = require('json!./data.json');
    alert(test);

        React.render( <Test details={test}/>, document.getElementById( "content" ) );
    </script>
    </body>
    </html>


**data.json**

{
        name: "Sample Test",
        description: "This is a sample test paper to demonstrate the ReactJS UI design by components.",
        passCutoff: 0.33,       
        applyNegativeMarking: false,
        time: 1,
        questions: [
            {
            no: "1",
            qtext:"California is in which part of USA?",
            options:[
                {text:"East"},
                {text:"Mid"},
                {text:"West"},
                {text:"South"}
            ],
            ans:"West",
            marks: 3
        },


        {
            no: "2",
            qtext:"Who is Prime Minister of India?",
            options:[
                {text:"Sonia Gandhi"},
                {text:"Narendra Modi"},
                {text:"Manmohan Singh"},
                {text:"Rahul Gandhi"}
            ],
            ans:"Narendra Modi",
            marks: 2
        },
        {
            no: "3",
            qtext:"Which of the following is most popular Search Engine Company?",
            options:[
                {text:"Microsoft"},
                {text:"Facebook"},
                {text:"Google"},
                {text:"Yahoo"}
            ],
            ans:"Google",
            marks: 1
        },
        ]
    }

＆＃13;

#nav {
  background-color: red;
  width: 15%;
  float: left;
}

#intro {
  background-color: yellow;
  width: 15%;
  float: right;
}

#content {
  background-color: blue;
  width: 70%;
  float: right;
}

footer {
  background-color: magenta;
  clear: both;
}

＆＃13;

在这里你可以看到我得到的是红色，蓝色和黄色的颜色顺序。但我想要的顺序是红色，黄色，然后是蓝色。

Answer 1

使用display:inline-block代替黄色div并删除浮动

＆＃13;

#intro {
  background-color: yellow;
  width: 15%;
  display:inline-block;
}
#nav {
  background-color: red;
  width: 15%;
  float: left;
}

#content {
  background-color: blue;
  width: 70%;
  float: right;
}

footer {
  background-color: magenta;
  clear: both;
}

＆＃13;

<div id="container">
  <section id="intro">...</section>
  <div id="content">...</div>
  <aside id="nav">...</aside>
  <footer>...</footer>
</div>

＆＃13;

Answer 2

你可以使用flex。无需使用float，如果需要，您可以稍后通过其他屏幕尺寸自定义它们order

#container {
  display: flex;
  flex-wrap: wrap;
}

#nav {
  background-color: red;
  width: 15%;
  order: 1;
}

#intro {
  background-color: yellow;
  width: 15%;
  order: 2;
}

#content {
  background-color: blue;
  width: 70%;
  order: 3;
}

footer {
  background-color: magenta;
  clear: both;
  width: 100%;
  order: 4;
}

<div id="container">
  <section id="intro">...</section>
  <div id="content">...</div>
  <aside id="nav">...</aside>
  <footer>...</footer>
</div>

Answer 3

您可以将flexbox用于此布局，而不是float。然后，您可以使用order属性根据需要定位项目。

#container {
  display: flex;
  flex-wrap: wrap;
}

#nav {
  background-color: red;
  min-width: 15%;
  order: 1;
}

#intro {
  background-color: yellow;
  min-width: 15%;
  order: 2;
}

#content {
  background-color: blue;
  flex: 1 0 70%;
  order: 3;
}

footer {
  background-color: magenta;
  flex: 1;
  order: 4;
}

<div id="container">
  <section id="intro">...</section>
  <div id="content">...</div>
  <aside id="nav">...</aside>
  <footer>...</footer>
</div>

Answer 4

不清楚，但您希望它具有响应能力吗？大小顺序是否应该相同？如果不只是改变：

  <div id="content">...</div>
  <section id="intro">...</section>
  <aside id="nav">...</aside>
  <footer>...</footer>

要：

{{1}}

另一种解决方案可能是使用Bootstrap。

Answer 5

如果您只想将第二个div（.content）的颜色更改为黄色，则只需更改css中的颜色即可。

如果您想按顺序交换div，请查看此代码段

#nav {
  background-color: red;
  width: 15%;
  float: left;
}

#intro {
  background-color: yellow;
  width: 15%;
  display: inline-block;
}

#content {
  background-color: blue;
  width: 70%;
  float: right;
}

footer {
  background-color: magenta;
  clear: both;
}

<div id="container">
  <section id="intro">...</section>
  <div id="content">...</div>
  <aside id="nav">...</aside>
  <footer>...</footer>
</div>

更改#intro

的样式

#intro {
    background-color: yellow;
    width: 15%;
    display: inline-block;
}

Answer 6

最好使用像Bootstrap这样的CSS框架，你可以轻松使用框架

$xml = new SimpleXMLElement($xml, LIBXML_NOERROR|LIBXML_ERR_NONE|LIBXML_ERR_FATAL);
foreach ($xml->xpath("//media:content") as $node)
{
    var_dump ((string) $node["url"]);
}

如何按特定顺序将3个元素彼此相邻浮动？

6 个答案: