2017-09-01 84 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 ...使用位置絕對你可以放置任何對象任何地方