Question

我想将第3分区内容（即图像）放在第二分区（即动画）旁边。我认为应该有一些CSS属性可以解决问题。

标记

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            #header {
                background-color:blue;
                height:100px;
                width:1000px;
            }

            #animate {
                background-color:red;
                height:130px;
                width:500px;
                float:left;
            }

            #Image {
                background-color:green;
                height:130px;
                width:500px;
            }
        </style>
    </head>
    <body>
        <div id="header">Header Section</div>
        <div id="animate">Animation section</div>
        <div id="Image"> Image section</div>
    </body>
</html>

你能帮助我吗？ css以上是否与所有浏览器兼容？

帮助表示赞赏，谢谢。

Answer 1

您可以使用float属性，如下所示：

#Image {
background-color:green;
height:130px;
width:500px;

float: right;
}

希望这会有所帮助。!!

Answer 2

将两个div插入容器中，并将float属性添加到#Image

代码段

＆＃13;

#header {
  background-color:blue;
  height:100px;
  width:1000px;
}

#content {
  height:130px;
  width:1000px;
}

#animate {
  background-color:red;
  height:130px;
  width:500px;
  float:left;
}

#Image {
  background-color:green;
  height:130px;
  width:500px;
  float:left;
}

＆＃13;

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div id="header">Header Section</div>
        <div id="content">
            <div id="animate">Animation section</div>
            <div id="Image"> Image section</div>      
        </div>      
    </body>
</html>

＆＃13;

我想在第二个分区（即动画）旁边放置第3分区内容（即图像）

2 个答案: