Html 使用框和位置属性的Div标记布局_Html_Css_Tags_Positioning

Html 使用框和位置属性的Div标记布局

html css tags

Html 使用框和位置属性的Div标记布局,html,css,tags,positioning,Html,Css,Tags,Positioning,要遵循的确切指示使用div标记（单独）在下面提供的imgur链接上实现布局。还可以使用框属性和位置属性我对上述说明和提供的图像的解释是应该有一个顶部宽度为70%，底部宽度为30%的容器，该容器由漂浮在右侧的两个元素分开。第一个（上部元素）是一个30%宽、50%高的嵌套图像。第二个（下部元素）是一个嵌套的p元素，宽度为70%，高度为50% 我相信这是很难解释的，并且可以通过预期的线框布局更好地理解这是一张预期布局的图片我确信有更好、更容易的方法来完成这项任务，但我必须坚持说明中提供的要

要遵循的确切指示

使用div标记（单独）在下面提供的imgur链接上实现布局。还可以使用框属性和位置属性

我对上述说明和提供的图像的解释是

应该有一个顶部宽度为70%，底部宽度为30%的容器，该容器由漂浮在右侧的两个元素分开。第一个（上部元素）是一个30%宽、50%高的嵌套图像。第二个（下部元素）是一个嵌套的p元素，宽度为70%，高度为50%

我相信这是很难解释的，并且可以通过预期的线框布局更好地理解

这是一张预期布局的图片

我确信有更好、更容易的方法来完成这项任务，但我必须坚持说明中提供的要求

这是我目前掌握的代码

div{
浮动：左；
宽度：100%；
身高：100%；
边框：1px纯蓝色；
}
div>img{
浮动：对；
宽度：30%；
身高：50%；
边框：1px纯红；
}
.p组{
浮动：对；
左缘：30%；
宽度：30%；
身高：50%；
边框：1px纯蓝色；
}
HTML


黑色文本
蓝色文本

这应该可以解决您的问题，对不起，这是我在这个网站上的第一个答案，所以可能有点生疏

我已经清除了正文填充和边距，因为有些浏览器默认实现。然后根据您的需要制作3个带id的div，需要技巧的部分是“蓝色”div，为了使其工作，您使用绝对位置并将顶部50%设置为左30%，它显示在“黑色”div的上方和“图像”div的下方

希望这对你有帮助

HTML

你有什么问题…？？我不能创建imgur上显示的div布局。你应该先学习css。没有像.div1、.div2这样的类。还有，怎么会有100%+30%+30%=260%的宽度？我已经修改了原始代码，以反映我从教授的指导中解释的更多内容。

<head>
<title> Dewbe Div layout with CSS3 </title>
<link href="styles.css" type="text/css" rel="stylesheet"/>
</head>

<body>
<div id="black"> </div>

<div id="image"> </div>

<div id="blue"> </div>

</body>

body {

    width:100%;
    height:100%;
    margin:0;
    padding:0;
   }

#black {

    background-color:black;
    width:70%;
    height:100%;
    float:left;
}

#image {

    background-color:yellow;
    float:right;
    width:30%;
    height:50%;
 }

#blue {

    background-color:blue;
    width:70%;
    height:50%;
    float:right;
    position:absolute;
    top:50%;
    left:30%;
}