我是新來的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