个人中心
gpt4 book ai didi

HTML 和 css for div inside a div and a div left and right

转载 作者：太空宇宙 更新时间：2023-11-03 19:37:48 24 4
gpt4 key购买 nike

我是 CSS 和 HTML(前端开发)的新手。我正在尝试复制图像中的要求。我试过下面的代码。但甚至没有接近要求。谁能建议我如何实现以下要求的精确复制？ enter image description here

所以左边的矩形框应该包含，右边应该有一些关于它的文本，如图所示。

请在下面找到代码:

#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
文章推荐： python - : in node causing Keyerror in xmlparsing using ElementTree
文章推荐： python - Django 分页 |获取页面索引中分页项目的当前索引(不是页面索引范围本身)
文章推荐： python - 使用 python 从 xml 填充列表
文章推荐： html - 使用 元素完全隐藏图像
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com