0

赤と緑の区画の右側に青の区画を配置するにはどうすればよいですか?

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            #red {width:100px; height:50px; background:red;}
            #green {width:100px; height:50px; background:green;}
            #blue {width:100px; height:100px; background:blue;}
        </style>
    </head>
    <body>
        <div id="red"></div>
        <div id="green"></div>
        <div id="blue"></div>
    </body>
</html>

別の div を親として 1 番目と 2 番目の部門に追加する方法を知っています。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            #parent {float:left;}
            #red {width:100px; height:50px; background:red;}
            #green {width:100px; height:50px; background:green;}
            #blue {width:100px; height:100px; background:blue; float:left;}
        </style>
    </head>
    <body>
        <div id="parent">
            <div id="red"></div>
            <div id="green"></div>
        </div>
        <div id="blue"></div>
    </body>
</html>

しかし、別の HTML 要素を追加せずに、目的を達成できるかどうか疑問に思っています。

前もって感謝します！

4

6 に答える 6

3

float 属性を使用して、要素を並べて表示できます。

更新: 相対的な配置でこの効果を実現できます。以下のデモとコードを参照してください。

デモ: http://jsfiddle.net/SO_AMK/Frf6w/90/

HTML:

<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>​

CSS:

#red {
    width: 100px;
    height: 50px;
    background: red;
}

#green {
    width: 100px;
    height: 50px;
    background: green;

    float: left;
    clear: both;
}

#blue {
    width: 100px;
    height: 100px;
    background: blue;

    top: -50px;
    float: left;
    position: relative;
}
于 2012-07-09T15:34:59.437 に答える
1

使用する

style="float:left"

これが何をするかというと、垂直方向のスペースを占有する前に、div が水平方向にできるだけ多くのスペースを占有するようにすることです。

于 2012-07-09T15:35:32.717 に答える
0 
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body
{
    max-width:200px;
    margin:auto;    
}
#red {width:100px; height:50px; background:red; **float:left;**}
#green {width:100px; height:50px; background:green;**float:left;**}
#blue {width:100px; height:100px; background:blue;**float:right;**}
</style>
</head>
<body>
    <div id="blue"></div>
    <div id="red"></div>
    <div id="green"></div>
</body>
</html>

ボディサイズを変更して、あなたが望んでいたアレンジメントに 3 つの div が含まれるようにしました。

色々な方法がありますが、私はこの方法を採用しています。(その方が良いというわけではありませんが)

それが役立つことを願っています:)

于 2012-07-09T15:37:25.207 に答える
0 
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#red {width:100px; height:50px; background:red;}
#parent {float: left; }
#green {width:100px; height:50px; background:green;}
#blue {width:100px; height:100px; background:blue; float: left;}
</style>
</head>
<body>
<div id="parent">
<div id="red"></div>
<div id="green"></div>
</div>
<div id="blue"></div>
</body>
</html>

編集：

それにいくつかの変更を加えました。問題は、赤と緑を互いの下に配置したい場合は、それらを別の区画に入れ、その隣に別の区画を浮かせる必要があるということです。親なしでそれが欲しい理由を正確に説明できますか？

于 2012-07-09T15:34:33.063 に答える
0

すべてのに追加float:left;しますdiv。

于 2012-07-09T15:34:33.700 に答える
0

青の div で次のコードを使用します。

style="float:left"
于 2012-07-09T15:48:23.490 に答える