Question

What float and clear properties do I need to use in order to achieve the following layout? They are not part of a list, simply divs that should float next to each other as shown below.

“entergraph

Answer 1

In that order, declare :

div4 float right
div3 float right
div1
div2

但是,最后的布局将取决于四舍五入的大小,如果四舍五入的大小与贵方的公式不符,则可能会产生奇怪的结果。

Answer 2

<div>
    <div style="float:left">
            <div style="background-color:Gray;width:100px;height:100px">
                div1
            </div>
            <div style="background-color:Yellow;width:100px;height:300px;">
            div4
        </div>
    </div>
    <div style="float:left;background-color:Green;width:100px;height:400px">
            div2
    </div>
    <div style="float:left;background-color:Maroon;width:100px;height:400px">
            div3
    </div>
</div>

根据你的要求,进行合理饮食和生育。

Answer 3

You need two wrapper divs and some simple floats:

传真:

<div id="left">
     <div id="div1">Div 1</div>
     <div id="div2">Div 2</div>
 </div> 
 <div id="right">
     <div id="div3">Div 3</div>
     <div id="div4">Div 4</div>
  </div>

CSS:

div 
{
    width: 100px:;
    height: 100px;
    border: 1px dashed #000;
}

#left
{
    float:left;
    width: 200px;
    height: 200px;
}

#right,
#right div
{
    float: left;
    height: 200px;
}

#right div
{
    width: 200px;
}

改变信条:

Answer 4

页: 1 类似:

<<>Cs>:

.first, .second{
    width: 150px;
    height: 100px;
    background-color:Yellow;
    clear:left;
    float:left;
}
.second{
    height: 60px;
    background-color:Blue;
}
.third, .fourth{
    width: 150px;
    height: 100px;
    background-color:Green;
    float:left;
    position:relative;
    top:-100px;
 }
.fourth{
    background-color:Red;
 }

<>光>:

<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
<div class="fourth">4</div>

2. 制衣

http://jsfiddle.net/h7qfL/1/

Answer 5

<div id="dMain">
  <div id="d" class="flt">
     <div id="d1"></div>
     <div id="d2"></div>
  </div>
  <div id="d2" class="flt">

  </div>
  <div id="d3" class="flt">

  </div>
<br class="cls" />
</div>

风格:

.flt{ float:left; }
.cls{clear:both;}

这样做。 Float用于环绕浮物。如同浮动:偷窃是指在案文左边浮动。用于清除任何此类浮动。更多人开始上学。

Answer 6

您可在四舍五入(第一期)内编出第1和第2号,并在另一批(第2号)中编出第3和第4号。之后,你将第1号浮线抛开,还有第2号浮标。

同样:

  <div id="first" style="float:left">
     <div id="div1"></div>
     <div id="div2"></div>
 </div> 
 <div id="second">
     <div id="div3" style="float:left"></div>
     <div id="div4"></div>
  </div>

You also need to write the width and height for every div.

http://jsfiddle.net/h7qfL/1/

友情链接