一个 div 和一个左右 div 内的 div 的 HTML 和 css-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

黑洞官方问答小能手

490476

文章

251245576

访问

+关注

分类

暂无分类

日期归档

暂无数据

一个 div 和一个左右 div 内的 div 的 HTML 和 css

发布于2022-06-29 22:29 阅读(459) 评论(0) 点赞(29) 收藏(1)

我是 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 和 din 学习阶段还很陌生。任何人都可以为此提供一个解决方案吗？

解释：外部 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>