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

Question

要遵循的确切说明

Use div tag (alone) to implement the layout on the imgur link provided below. Box properties & position properties can also be used.

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

There should be a container whose top width is 70% and bottom is 30%, that is split by two elements that are floated on the right side. The first (upper element) A nested image that is 30% width, 50% height. The second (lower element) is a nested p element that is 70% width 50% height.

我认为这很难解释，通过预期的线框布局会更好地理解。

这是预期布局的图片 http://imgur.com/Yjdo5xA

我确信有更好更简单的方法来完成这项任务，但我必须遵守说明中提供的要求。

这是我目前拥有的代码。

div {
    float: left;
    width: 100%;
    height: 100%;
    border: 1px solid blue;
}

div > img {
    float: right;
    width: 30%;
    height: 50%;    
    border: 1px solid red;
}

.div p {
    float: right;
    margin-left: 30%;
    width: 30%;
    height: 50%;
    border: 1px solid blue;
}
HTML

<div>
    <p>Text in Black</p>
    <img src="image1.jpg" width="150px" height="150px" alt="Image1">
    <p>Text in Blue</p>
</div>

Answer 1

这应该可以解决您的问题，抱歉，这是我在此网站上的第一个答案，所以它可能有点生疏。

我已经清除了 body padding 和 margin，因为有些浏览器默认实现了。然后继续制作 3 div's with id's to your needs, tricky bit is the "blue" div, 为了让它工作你使用绝对位置并设置顶部 50% 左侧 30%它出现在 "black" div 上方和 "image" div 下方。

希望对您有所帮助。

HTML

<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>

CSS

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%;
}

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

Div tag layout using box and position properties

html

css

tags

positioning

HTML

CSS