我正在尝试创建两个 div
,一个位于左侧,width
为 49%,然后是 2% margin
,然后是另一个 div
也为 49% width
。但是我在垂直空间以及 margin
方面遇到了问题。
演示
.Footer-firstElement {
font-size: 0;
line-height: 0;
height: 200px;
background-color: tomato;
}
.Footer-firstElementLeft {
display: inline-block;
font-size: 16px;
line-height: 20px;
width: 49%;
height: 100%;
margin-top:0;
margin-right: 2%;
background-color: pink;
}
.Footer-firstElementRight {
display: inline-block;
font-size: 16px;
line-height: 20px;
width: 49%;
height: 100%;
padding: 0;
background-color: gold;
}
<div class="Footer-firstElement">
<div class="Footer-firstElementLeft">
<a href="#">Foo bar </a>
</div>
<div class="Footer-firstElementRight">
Foo bar <br />
Foo bar
</div>
</div>
这是一段代码:https://jsfiddle.net/L6k5ocyr/3/
我想我遗漏了什么,知道吗?
最佳答案
.Footer-firstElement {
font-size: 0;
line-height: 0;
height: 200px;
background-color: tomato;
}
.Footer-firstElementLeft {
display: inline-block;
font-size: 16px;
line-height: 20px;
width: 49%;
height: 100%;
margin-top:0;
margin-right: 2%;
background-color: pink;
float:left; /* edited */
}
.Footer-firstElementRight {
display: inline-block;
font-size: 16px;
line-height: 20px;
width: 49%;
height: 100%;
padding: 0;
background-color: gold;
}
<div class="Footer-firstElement">
<div class="Footer-firstElementLeft">
<a href="#">Foo bar </a>
</div>
<div class="Footer-firstElementRight">
Foo bar <br />
Foo bar
</div>
</div>
试试这个:
.Footer-firstElementLeft {
float: left;
}
关于html - Div 填充 wrapper 和边距的垂直空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47248938/