Question

这是HTML代码

<!doctype html>
<html>


<head>
    <title>Float</title>
    <link rel="stylesheet" type="text/css" href="Font Sizes.css">
</head>



<body>

    <div class="First">
        <img src="firstImage.png" alt="First Image of Article" class="FirstImage">
        <p> Picture No.1</p>
    </div>

    <div class="Second">
        <img src="secondImage.png" alt="Second Image of Article" class="SecondImage">
        <p>Picture No.2</p>

    </div>

</body>

这是CSS

.First{
  width:430px;
  
  background-color: Red;
  float: left;
  
}
.Second{
   width:330px;
  
  background-color: Blue;
   
 
}

我尝试了不同的技巧但失败了。请详细解释。我搜索了很多，但找不到我的答案。第二个元素没有自我安排到第一个元素的右侧。当我从第二个元素中删除width属性然后它在右边排列。使用Width属性：

第二个元素没有Width属性：

Answer 1

div是块级元素，您只在First上提供了一个浮点数。如果浏览器宽度超过760px，在Second上放置一个浮点数就可以获得所需的效果;

如果设置了元素的宽度，为什么float属性不起作用？

1 个答案: