Question

我必须分区标签。如果两者都有空间我希望它们并排但是如果没有足够的空间，我希望第二个低于第一个。

我必须使用哪些css / flex box属性？

非常感谢！

enter image description here

编辑：

SIMPLE HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

    <section id="section_logo">

    <img id="logo" src="images/Logo.gif"/>

</section>  

<section id="section_login">

    <img id="logo" src="images/Logo.gif"/>

</section>

CSS

body{
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:-ms-flexbox; /* Internet Explorer 10 */
display:box;

display: -ms-flexbox;           /* TWEENER - IE 10 */
display: -webkit-flex;          /* NEW - Chrome */
display: flex;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */

width:100%;

-webkit-box-pack:center;    /*Cuando el monitor es mayor al sitio centra el sitio.*/

-webkit-box-orient: vertical;

background-image: url(../images/FondoPantalla.png);

background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
 }

#section_logo{
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:-ms-flexbox; /* Internet Explorer 10 */
display:box;

-webkit-flex: 1;                /* Chrome */
-ms-flex: 1;                    /* IE 10 */
flex: 1;   

position: relative;

width:50%;
  }

#section_login{
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:-ms-flexbox; /* Internet Explorer 10 */
display:box;

-webkit-flex: 1;                /* Chrome */
-ms-flex: 1;                    /* IE 10 */
flex: 1;   

position: relative;

width:50%;

Answer 1

这在很大程度上取决于您需要什么细节。如果您只需要并排放置两个方形内容块，并使用足够小的窗口进行垂直堆叠，请在这些块上使用display: inline-block。

http://jsfiddle.net/sHNjm/

当屏幕上没有足够的空间时，<section>标签向下移动</section>

1 个答案: