Question

我有一个宽度和高度为420px的div容器，在容器内我有4个小div，宽度为140px，高度为140px但是第二个divs高度是170px。如果我将css float属性float：left应用于除容器div之外的所有div 。 Q1）。第4个div将在哪里。 Q2）。如果我希望第4个div低于1st div，我怎么能不使用position：absolute或relative。

Parse error: syntax error, unexpected '<' in C:\xampp\htdocs\index\index.php on line 44

CSS

<div class="container">
  <div class="section1"></div>
  <div class="section2"></div>
  <div class="section3" ></div>
  <div class="section4"></div>
</div>

Here is the link for my code JSFiddle

Answer 1

定义您的.section4{clear:left;}

<强>演示

＆＃13;

.container{width:420px;height:420px;border:1px solid black;}
.section1{width:140px;height:140px;background-color:green;float:left;}
.section2{width:140px;height:170px;background-color:yellow;float:left;}
.section3{width:140px;height:140px;background-color:red;float:left;}
.section4{width:140px;height:140px;background-color:orange;float:left;}


.section4{clear:left;}

＆＃13;

<div class="container">
  <div class="section1"></div>
  <div class="section2"></div>
  <div class="section3" ></div>
  <div class="section4"></div>
</div>

＆＃13;

第二个选项您可以像这样尝试display:inline-block

＆＃13;

.container{width:420px;height:420px;border:1px solid black;font-size:0;}
    .section1{width:140px;height:140px;background-color:green;display:inline-block;vertical-align:top;font-size:12px;}
    .section2{width:140px;height:170px;background-color:yellow;display:inline-block;vertical-align:top;font-size:12px;}
    .section3{width:140px;height:140px;background-color:red;display:inline-block;vertical-align:top;font-size:12px;}
    .section4{width:140px;height:140px;background-color:orange;display:inline-block;vertical-align:top;font-size:12px;}

＆＃13;

    <div class="container">
      <div class="section1"></div>
      <div class="section2"></div>
      <div class="section3" ></div>
      <div class="section4"></div>
    </div>

＆＃13;

Answer 2

将clear: both添加到您的第4个div：

https://jsfiddle.net/8kyed4fx/1/

用浮点数定位div

2 个答案: