在位置相对div内浮动2个div
在位置相对div内浮动2个div
提问于 2015-12-02 17:39:18
我有一个关于在一个相对位置的div中浮动2个div的问题。它们应该向左浮动，但它不起作用。我尝试了几次，在开发人员工具中重写了CSS。我希望有人能帮助我。我使用谷歌公司的MDL (Material Design Lite)响应框架。结果应该如截图所示。提前感谢您的帮助。
Final result
.card-wasserlabor {
min-height: 0;
width: 100%;
min-height: 110px;
height: auto;
box-shadow: 0 1px 1px 0 rgba(0,0,0,.015),0 3px 1px -2px rgba(0,0,0,.15),0 1px 5px 0 rgba(0,0,0,.015);
h4 {
font-size: $card-title;
color: $dark-text;
margin-left: 12px;
margin-top: 3px;
}
.img {
background: $grey;
display: inline-block;
height: 100%;
position: absolute;
width: 117px;
img {
height: 100%;
position: absolute;
width: 100%;
}
.circle-check {
background: rgba($black, 0.4);
height: 56px;
width: 56px;
border-radius: 100%;
position: absolute;
left: calc(50% - 30px);
top: calc(50% - 25px);
&:hover {
background: rgba($red, 1);
}
} <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">
<div class="mdl-card card-wasserlabor">
<div class="img">
<img src="../assets/cards/card-img-10.png" alt="sera">
<div class="circle-check">
<i class="material-icons">check</i>
</div>
</div>
<div class="text">
<h4>Mittelamerika</h4>
</div>
<div class="info">
<div class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">info</i>
</div>
</div>
</div>
</div>
回答 2
Stack Overflow用户
发布于 2015-12-02 18:09:53
我真的不能运行你的代码，有太多缺失的变量无法解决这个问题。我希望这能有所帮助。你只需要管理你的宽度，并浮动剩下的所有东西：
看看这个jsFiddle。
编辑：jsFiddle链接一开始不正确。如果代码完全与其他内容相关，请重新单击此链接。
EDIT 2：修复代码中的填充错误。
html：
<div class="header-area">
<div style="padding: 20px; ">
Yellow header
</div>
</div>
<div class="container">
<div class="element" style="background-color: green; ">
<img src="http://placehold.it/150x150" alt="">
<div class="description">
This is the description
</div>
</div>
<div class="element" style="background-color: red; ">
<img src="http://placehold.it/150x150" alt="">
<div class="description">
This is the description
</div>
</div>
<div class="element" style="background-color: orange; ">
<img src="http://placehold.it/150x150" alt="">
<div class="description">
<div class="text">
This is the description
</div>
</div>
</div>
</div>css：
.header-area{
background-color: yellow;
height: 100px;
width: 100%;
}
.container{
height: 100%;
width: 100%;
float: left;
background-color: lightblue;
}
.element{
float: left;
width: 50%;
height: 150px;
}
img{
float: left;
}
.description{
text-align: center;
}
.text{
padding-top: 50px;
}Stack Overflow用户
发布于 2015-12-02 18:30:32
我对你的代码做了一些修改，希望它能帮助你完全实现你的目标：
- 要将文本放置在img上，您需要相对定位其父对象，并绝对定位文本。然后您可以将其移动到img。
- 上，以便轻松地将img与其他元素对齐，我认为这对包装这些元素并为它们提供内联块显示非常有用。然后你可以在你想要的位置调整它们。
.card-wasserlabor {
min-height: 0;
width: 100%;
min-height: 110px;
height: auto;
box-shadow: 0 1px 1px 0 rgba(0,0,0,.015),0 3px 1px -2px rgba(0,0,0,.15),0 1px 5px 0 rgba(0,0,0,.015);
}
h4 {
font-size: $card-title;
color: $dark-text;
}
.img {
background: $grey;
display: inline-block;
height: 100%;
position: relative;
width: 117px;
}
.circle-check {
position: absolute;
top: 0;
left: 0;
background: rgba($black, 0.4);
height: 56px;
width: 56px;
border-radius: 100%;
position: absolute;
left: calc(50% - 30px);
top: calc(50% - 25px);
&:hover {
background: rgba($red, 1);
}
}
.info-wrapper{
display: inline-block;
vertical-align: top;
}<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">
<div class="mdl-card card-wasserlabor">
<div class="img">
<img src="http://sweetclipart.com/multisite/sweetclipart/files/ff0000%20Color%20Square%20RGB%20Red.png" alt="sera" width="100px">
<div class="circle-check">
<i class="material-icons">check</i>
</div>
</div>
<div class="info-wrapper">
<div class="text">
<h4>Mittelamerika</h4>
</div>
<div class="info">
<div class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">info</i>
</div>
</div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34039342
复制相关文章
相似问题
腾讯云开发者
