2017-09-01 81 views
1

我是新来的CSS和HTML(前端开发)。我试图复制图像中的要求。我已经尝试了下面的代码。但甚至没有接近要求。任何人都可以请建议我如何实现以下要求的确切重复? enter image description herehtml和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用于图像右侧的文字。

+0

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – sol

+0

如果你的部分总是将在图像 - 文本格式,然后我不明白为什么不使用标准的HTML表来实现这一目标。 – Luke

+0

是的。它总是一个图像文本格式@Luke。 – user3750720

回答

0

.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>

+0

我有一个建议。使用引导类.https://getbootstrap.com/docs/3.3/examples/grid/ –

+0

非常感谢这里的建议。但是这只应该在白色部分。我如何使这个代码中的外部灰色div? – user3750720

+0

我编辑的代码,也有一个灰色的部分 –

-1

#wraper{ 
 
display:block; 
 
background:gray; 
 
padding:10px; 
 
width:100%; 
 
} 
 
#wraper #left,#wraper #right{ 
 
display:inline-block; 
 
width:46%; 
 
background:#fff; 
 
margin:1%; 
 
padding:1%; 
 
}
<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="wraper"> 
 
       <div id="left"> 
 
         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 id="right"> 
 
         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> 
 
</body>

这是你想要?

0

这里是你如何使它 首先你创建两行(div),每个有两个div(浮动到左边),宽度的45%,右边的div将有5%的余量

enter image description here

<!doctype html> 
 

 
<html> 
 
\t <head> 
 
\t \t <title>Page Title</title> 
 
\t \t <meta charset="UTF-8"> 
 
\t \t <meta name="viewport" content="initial-scale=1.0"> 
 
\t \t <style> 
 
\t \t \t body,html{ 
 
\t \t \t \t box-sizing: border-box; 
 
\t \t \t } 
 
\t \t \t .container{ 
 
\t \t \t \t padding: 10px; 
 
\t \t \t \t border-top: 2px solid black; 
 
\t \t \t \t border-bottom: 2px solid black; 
 
\t \t \t } 
 
\t \t \t .row{ 
 
\t \t \t \t padding: 20px; 
 
\t \t \t \t margin-bottom: 20px; 
 
\t \t \t \t clear: both; 
 
\t \t \t \t overflow: hidden; 
 
\t \t \t } 
 
\t \t \t .box{ 
 
\t \t \t \t float: left; 
 
\t \t \t \t width: 45%; 
 
\t \t \t \t box-sizing: border-box; 
 
\t \t \t } 
 
\t \t \t .box-image{ 
 
\t \t \t \t margin: 0; 
 
\t \t \t \t background-color: #ccc; 
 
\t \t \t \t height: 150px; 
 
\t \t \t \t border: 2px solid black; 
 
\t \t \t } 
 
\t \t \t .box-text{ 
 
\t \t \t \t padding: 10px; 
 
\t \t \t \t margin-left: 10%; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t </style> 
 
\t </head> 
 

 
\t <body> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="box box-image"> 
 

 
\t \t \t \t </div> 
 
\t \t \t \t <div class="box box-text"> 
 
\t \t \t \t \t Delhi is a crowded city. There are very few rich people who travel by their 
 
\t \t \t \t \t \t \t \t own vehicles. The majority of the people cannot afford to hire a taxi or a 
 
\t \t \t \t \t \t \t \t three-wheeler. They have to depend on D.T.C. buses, which are the cheapest 
 
\t \t \t \t \t \t \t \t mode of conveyance. D.T.C. buses are like blood capillaries. 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="box box-image"> 
 

 
\t \t \t \t </div> 
 
\t \t \t \t <div class="box box-text"> 
 
\t \t \t \t \t Delhi is a crowded city. There are very few rich people who travel by their 
 
\t \t \t \t \t \t \t \t own vehicles. The majority of the people cannot afford to hire a taxi or a 
 
\t \t \t \t \t \t \t \t three-wheeler. They have to depend on D.T.C. buses, which are the cheapest 
 
\t \t \t \t \t \t \t \t mode of conveyance. D.T.C. buses are like blood capillaries. 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 

 
\t \t </div> 
 
\t </body> 
 
</html>

-2

你只需使用CSS的位置属性即可。这是为那些谁是基本的CSS ...使用位置绝对你可以放置任何对象任何地方