我是新来的CSS和HTML(前端开发)。我试图复制图像中的要求。我已经尝试了下面的代码。但甚至没有接近要求。任何人都可以请建议我如何实现以下要求的确切重复? html和css for div div和div左右
所以左边的矩形框应该包含,右边应该有一些关于它的文字,如图中所示。
请找到下面的代码:
#inner{
margin-left: 20%;
margin-right : 20%;
margin-top:10%;
margin-bottom:10%;
background-color: white;
border : 1px solid black;
}
#outer{
background-color: rgb(238,238,238);
width:100%;
height:100%;
}
#right #para2{
width:50%;
right:0;
}
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="outer">
<div id="inner">
<div id="wraper">
<div id="left">
<div id="para1">
Delhi is a crowded city. There are very few rich people who travel by their
own vehicles. The majority of the people cannot afford to hire a taxi or a
three-wheeler. They have to depend on D.T.C. buses, which are the cheapest
mode of conveyance. D.T.C. buses are like blood capillaries.
</div>
</div>
<div id="right">
<div id="para2">
Delhi is a crowded city. There are very few rich people who travel by their
own vehicles. The majority of the people cannot afford to hire a taxi or a
three-wheeler. They have to depend on D.T.C. buses, which are the cheapest
mode of conveyance. D.T.C. buses are like blood capillaries.
</div>
</div>
</div>
</div>
</div>
</body>
我知道我没有在附近,但我真的有在这里应用CSS艰难的时间。我对于CSS学习阶段非常陌生。任何请为此请提供一个soolutiion吗?
说明:外部div是Gray中的部分。 内部div是白色部分。 剩下的div是左边的图像。 div用于图像右侧的文字。
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – sol
如果你的部分总是将在图像 - 文本格式,然后我不明白为什么不使用标准的HTML表来实现这一目标。 – Luke
是的。它总是一个图像文本格式@Luke。 – user3750720