1

タグをセクションにする必要があります。両方のスペースがある場合は、それらを並べて配置しますが、両方のスペースが十分でない場合は、2 番目を 1 番目より下に配置します。

css/flex ボックスのどのプロパティを使用する必要がありますか?

どうもありがとう！

ここに画像の説明を入力

編集:

シンプルな 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%;
4

1 に答える 1

1

これは、必要な詳細に大きく依存します。2 つの正方形のコンテンツ ブロックを横に並べて、垂直方向に積み上げ、ウィンドウを十分に小さくする必要がある場合はdisplay: inline-block、それらのブロックで を使用します。

http://jsfiddle.net/sHNjm/

于 2013-08-29T19:33:00.857 に答える