2

html5/css3 で 3 つのボックス (div) を揃えようとしています。2 つのボックスが左側に積み重ねられ、1 つがこれら 2 つのボックスの右側に配置され、左側の 2 つのボックスの高さ全体に広がります。

残念ながら、右のボックスを他の 2 つのボックスと揃えることができません。常に左ボックスの下に表示されますが、ブラケット div の右端に揃えられます。

これらは、ボックスを配置するために使用している css 定義です。

#leftTop {
    background-color: green;
    color: silver;
    width: 32%;
    height: 110px;
}

#leftBottom {
    background-color: red;
    color: yellow;
    width: 32%;
    height: 540px;
}

#rightAside {
    background-color: blue;
    color: pink;
    width: 60%;
    height: 650px;
    float:left;;
}

Display: inline-block と float コマンドでいくつかの構成を試しました。しかし、残念ながら何も機能しませんでした。

誰かアイデアがありますか？あなたの答えは大歓迎です!!!

4

3 に答える 3

2

このように。

HTML:

<div id="leftWrapper">
   <div id="leftTop"></div>
   <div id="leftBottom"></div>
</div>
<div id="rightAside"></div>

CSS:

#leftWrapper {
    float:left;
    width: 32%;
    height: 650px;
}
#leftTop {
    background-color: green;
    color: silver;
    width: 100%;
    height: 110px;
}

#leftBottom {
    background-color: red;
    color: yellow;
    width: 100%;
    height: 540px;
}

#rightAside {
    background-color: blue;
    color: pink;
    width: 60%;
    height: 650px;
    float:right;
}
于 2013-09-20T19:04:27.833 に答える
0 
<style>
#left
{
float:left;
 width: 32%;
}
#leftTop {
    background-color: green;
    color: silver;
    width: 100%;
    height: 110px;
}

#leftBottom {
    background-color: red;
    color: yellow;
    width: 100%;
    height: 540px;
}

#rightAside {
    background-color: blue;
    color: pink;
    width: 60%;
    height: 650px;
    float:left;;
}
</style>
<div id="left">
<div id="leftTop"></div>
<div id="leftBottom"></div>
</div>
<div id="rightAside"></div>
于 2013-09-20T19:08:59.217 に答える
0

これを行う方法は次のとおりです。

HTML:

<div class="container">

   <div class="box3">This is box 3</div>

   <div class="box1">This is box 1</div>

   <div class="box2">This is box 2</div>

</div>

CSS:

.container {
  position: relative;
  width: 100%;
  background: #cccccc;
}

.box1 {
  width: 100px;
  height: 100px;
  background: #ff0000;
}

.box2 {
  width: 100px;
  height: 100px;
  background: #00ff00;
}

.box3 {
  position: absolute;
  right: 0px;
  height: 100%;
  background: #0000ff;
}

働くフィドルはここにあります：http://jsfiddle.net/Xmg6Z/

于 2013-09-20T19:10:00.913 に答える