个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我是 CSS 和 HTML(前端开发)的新手。我正在尝试复制图像中的要求。我试过下面的代码。但甚至没有接近要求。谁能建议我如何实现以下要求的精确复制？ 
所以左边的矩形框应该包含，右边应该有一些关于它的文本，如图所示。
请在下面找到代码:
#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 和喧嚣的学习阶段还很陌生。任何人都可以为此提供解决方案吗？
说明:外层的div是灰色的部分。内部的 div 是白色的部分。左侧的 div 用于左侧的图像。div 用于图像右侧的文本。
最佳答案
.allParent{
background-color:gray;
padding:10% 20%;
}
.titleAll{
width:100%;
padding-top:5px;
background-color:#fff;
text-align:center;
}
.titleAll h4{
color:gray;
margin:0;
}
.parent {
display: flex;
flex-direction: row;
padding: 10px;
background-color:#fff;
text-align:left;
}
.parent .child {
padding-right: 10px;
flex-grow: 1;
width:50%;
font-size:80%;
}
.parent .child:last-child {
padding-right: 0;
}<div class="allParent">
<div class="titleAll">
<h4>Cats description</h4>
<div>
<div class="parent">
<div class="child">
<div class="content">
<img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Schrodinger-as-a-kitten..png" style="width:100%">
</div>
</div>
<div class="child">
<div class="content">Cats are similar in anatomy to the other felids, with a strong flexible body, quick reflexes, sharp retractable claws, and teeth adapted to killing small prey. Cat senses fit a crepuscular and predatory ecological niche. Cats can hear sounds too faint or too high in frequency for human ears, such as those made by mice and other small animals.</div>
</div>
</div>
<div class="titleAll">
<h4>Cats description</h4>
<div>
<div class="parent">
<div class="child">
<div class="content">
<img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Schrodinger-as-a-kitten..png" style="width:100%">
</div>
</div>
<div class="child">
<div class="content">Cats are similar in anatomy to the other felids, with a strong flexible body, quick reflexes, sharp retractable claws, and teeth adapted to killing small prey. Cat senses fit a crepuscular and predatory ecological niche. Cats can hear sounds too faint or too high in frequency for human ears, such as those made by mice and other small animals.</div>
</div>
</div>
</div>关于HTML 和 css for div inside a div and a div left and right，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46002341/
24
4
0
我是一名优秀的程序员,十分优秀！