Question

我有这个HTML页面：

<!DOCTYPE html> <html lang="en">   <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="styleBox.css">
    <script src="script.js"></script>   </head>   <body>
    <div>
      <div>
        <div>
            text
        </div>
      </div>
    </div>   </body> </html>

此页面应如下所示 - http://pasteboard.co/nFlMljzPG.png

我尝试了一些东西，但我不知道在第三个div中设置文本样式但是没有编辑HTML页面

我的css：

div {
    width: 380px;
    height: 300px;
    background: #B0CDE9;
    border-style: solid;
    border-color: black;
    border-width: 1px;
}

div div {
    width: 290px;
    height: 280px;
    background: yellow;
    margin-left: 45px;
    margin-top: 8px;
}

div div div {
    width: 120px;
    height: 140px;
    background: #82C940;
    margin-top: 70px;

}

（我的方框是 - http://pasteboard.co/nFo7mv7R7.png）你能告诉我一件事吗？

Answer 1

由于您不想更改HTML代码，您只需将填充应用于第三个div以将文本放在其中。但是，添加填充时需要调整div的宽度和高度。例如，如果您的div的宽度为120像素，并且您希望文本距离左边框20px，那么您将左边的填充为20px并将宽度减小20px。因此，现在你有一个宽度为100px且填充为20px的div。请参阅下面的示例。

HTML

<div>
  <div>
    <div>
       text
    </div>
  </div>
</div>

CSS

div {
    width: 380px;
    height: 300px;
    background: #B0CDE9;
    border-style: solid;
    border-color: black;
    border-width: 1px;
}

div div {
    width: 290px;
    height: 280px;
    background: yellow;
    margin-left: 45px;
    margin-top: 8px;
}

div div div {
    width: 100px;
    height: 60px;
    background: #82C940;
    margin-top: 70px;
    padding-top:80px;
    padding-left:20px;
}

Answer 2

您需要使用类或ID才能为每个div 清洁

设置样式

也许这就是您所需要的。

.outter{
  height: 300px;
  width: 300px;
  background: orangered;
  border: 5px solid orange;

}

.center{
  height: 50%;
  width: 70%;
  background: blue;
  border: 5px solid grey;
  margin: 10% auto;

}
.inner{
  height: 50%;
  width: 70%;
  background: maroon;
  border: 5px solid white;
  margin: 20% auto;

}
.inner p{
  font-size: 1em;
  font-family: serif;
  color: white;
  padding: 5px;
}

<div class='outter'>
  <div class='center'>
  
  <div class='inner'>
  <p>This is the text in the inner div</p>
  
  </div>
  
    
  </div>
  
  </div>

Answer 3

	.blue_div{
		width: 30%;
		background: blue;
		margin:0 auto;
		margin-top: 10%;
		border: thin black solid;
		height: 500px;
	}

	.blue_div .yellow_div{
		width: 80%;
		margin: 0 auto;
		height: 450px;
		background: yellow;
		border: thin black solid;
		margin-top: 5%;
	}


	.blue_div .yellow_div .text_div{
		width: 40%;
		margin-left: 10%;
		height: 200px;
		background: green;
		border: thick black solid;
		margin-top: 25%;
		display: block;
		text-align: left;
		line-height: 200px;
	}

	.text_div span{

		color: #000000;
		
	}

<div class="blue_div">

<div class="yellow_div">
<div class="text_div">
<span>&nbsp;&nbsp;Text</span>
	
</div>

</div>

这和你想要的一样吗？

PS：根据您的需要更改 CSS 。

希望它有所帮助。

如何使用CSS设置3（div）框的样式

3 个答案: