[英]negative margin-top in combination with floats doesn't work as expected (only in Firefox)
I want try to create this screen, but text fields on the right side are shifted above. 我想尝试创建此屏幕,但右侧的文本字段已移至上方。
Here is a working example and here is my code: 这是一个工作示例 ,这是我的代码:
HTML: HTML:
<div class="TileMenu">
<div class="TileRow">
<div class="LeftTile">
<div class="TileImage">
<img src="http://page.mi.fu-berlin.de/krudolph/stuff/stackoverflow.png" title="Castle" alt="Castle" />
</div>
<div class="TileText">
<p>Text1</p>
</div>
</div>
<div class="RightTile">
<div class="TileImage">
<img src="http://page.mi.fu-berlin.de/krudolph/stuff/stackoverflow.png" title="House" alt="House" />
</div>
<div class="TileText">
<p>Text 2</p>
</div>
</div>
</div>
<div class="TileRow">
<div class="LeftTile">
<div class="TileImage">
<img src="http://page.mi.fu-berlin.de/krudolph/stuff/stackoverflow.png" title="Satellite" alt="Satellite" />
</div>
<div class="TileText">
<p>Text 3</p>
</div>
</div>
<div class="RightTile">
<div class="TileImage">
<img src="http://page.mi.fu-berlin.de/krudolph/stuff/stackoverflow.png" title="Palace" alt="Palace" />
</div>
<div class="TileText">
<p>Text 4</p>
</div>
</div>
</div>
</div>
CSS: CSS:
.TileRow{
padding: 5px 0px;
clear: both;
}
.LeftTile{
width: 49.7%;
float: left;
/*height: 340px;
overflow: hidden;*/
}
.LeftTile img{
width: 100%;
}
.RightTile{
width: 49.7%;
float: right;
/*height: 340px;
overflow: hidden;*/
}
.RightTile img{
width: 100%;
float: right;
}
.TileImage{
width: 49.7%;
}
.TileText{
position: relative;
margin-top: -80px;
max-width: 150px;
height: 50px;
background-color: #FFF;
color: #57abe9;
padding-left: 10px;
display: table;
}
.TileText p{
display: table-cell;
vertical-align: middle;
font-size: 1.3em;
}
Before I tried to use top:-80px;
在我尝试使用
top:-80px;
but than I got a big white space between each row (because of the text field). 但比起每行之间有一个很大的空白(由于文本字段)。 So now I'm using
margin-top: -80px;
所以现在我使用
margin-top: -80px;
but this seems only to work in Firefox. 但这似乎仅在Firefox中有效。
How about position: absolute? 位置:绝对呢?
What if you remove the float:right
on the image in the RightTile class? 如果在RightTile类中删除图像上的
float:right
怎么办? To something like this: http://jsfiddle.net/KjakS/7/ 像这样: http : //jsfiddle.net/KjakS/7/
.RightTile img{ width: 100%; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.