Question

我有两个位于彼此旁边的div，他们有两个父div。我的第二个div已经获得了.redBlock类，但它只是通过符号直径大小来制作背景。如何使div的大小与父级的div大小相同。因为我需要背景如下图所示。 Cross也意味着红色背景。

＆＃13;

<html>
<head>
<title>Phoneblock</title>
</head>

<body>
<div class="phoneBlock blockContainer">
<div class="block1">
<img class="phone picture" src="phonicon.jpg" alt="phone">
<span class="phoneNumber semiBold"> phone</span> 
</div>
	<div class="redBlock block2">
	<span class="upperCase simpleTextColor tahoma">Block</span> 
	</div>
</div>	



</body>
<style type="text/css">

.pic{

}
.phoneBlock{
	height: : 500px;
	border:1px solid black;
}

.phoneNumber{
color: #d81e04;
}


.upperCase{
text-transform: uppercase;
}

.redBlock{
	height: 90px;
	background-color: #d81e04;
}

.simpleTextColor{
	color:#ffffff;
}

@font-face {
    font-family: SemiBold;
    src: url("MyriadPro-Semibold.otf") format("opentype");
}


@font-face {
    font-family: BlackIt;
    src: url("MyriadPro-BlackIt.otf") format("opentype");
}


.semiBold{
	font-family: SemiBold;
}

.blackIt{
font-family: BlackIt;
}
.tahoma{
	font-family: Tahoma;
}

.blockContainer{
    text-align:center;
}
.block1, .block2{
    display:inline;
}


</style>
</html>

＆＃13;

Answer 1

在父

中设置display:flex

修改

如何将“BLOCK”字放到底部？

在display:flex中设置.redBlock，在子align-self:flex-end设置span

.phoneBlock { border: 1px solid black; display: flex; justify-content: center/* align content horizontally */ } .phoneBlock>div { margin: 0 5px; } .phoneNumber { color: #d81e04; } .upperCase { text-transform: uppercase; } .redBlock { display: flex; background-color: #d81e04; } .redBlock span { align-self: flex-end } .simpleTextColor { color: #ffffff; } img { vertical-align: bottom; max-width: 100% }

<div class="phoneBlock blockContainer"> <div class="block1"> <img class="phone picture" src="//placehold.it/90x90" alt="phone"> <span class="phoneNumber semiBold"> phone</span> </div> <div class="redBlock block2"> <span class="upperCase simpleTextColor tahoma">Block</span> </div> </div>

Answer 2

<html>
<head>
<title>Phoneblock</title>
</head>

<body>
<div class="phoneBlock blockContainer">
<div class="block1">
<img class="phone picture" src="phonicon.jpg" alt="phone">
<span class="phoneNumber semiBold"> phone</span> 
</div>
	<div class="redBlock block2">
	<span class="upperCase simpleTextColor tahoma">Block</span> 
	</div>
</div>	



</body>
<style type="text/css">

.pic{

}
.phoneBlock{
	height: : 500px;
	border:1px solid black;
}

.phoneNumber{
color: #d81e04;
}


.upperCase{
text-transform: uppercase;
}

.redBlock{
	height: 100%;
	background-color: #d81e04;
    position: absolute;
}

.simpleTextColor{
	color:#ffffff;
    
}

@font-face {
    font-family: SemiBold;
    src: url("MyriadPro-Semibold.otf") format("opentype");
}


@font-face {
    font-family: BlackIt;
    src: url("MyriadPro-BlackIt.otf") format("opentype");
}


.semiBold{
	font-family: SemiBold;
}

.blackIt{
font-family: BlackIt;
}
.tahoma{
	font-family: Tahoma;
}

.blockContainer{
    text-align:center;
    position: absolute;
    width: 100%;
}
.block1, .block2{
    display:inline;
}


</style>
</html>

Answer 3

首先在 CSS 中设置一个类，如：

img.phone{

    height: 100%;
    width: auto;
}

也改变

.block1, .block2{

    height: 100%;
    display: table;
    float: left;
}

并修改

.phoneBlock{

    height: 500px;
    border: 1px solid black;
    display: table;
    margin: 0 auto;
}
.redblock {
background-color: #d81e04;
}

尝试使用此未经测试的代码。

无法设置div的正确大小

3 个答案: