[英]How to display image on the right side of div without ruining flex layout?
How can I insert an image on the right hand side of my div box without ruining my flex layout for the rest of the elements in the div. 如何在div框的右侧插入图像,而不破坏div中其余元素的弹性布局。 Here is a reference picture:
这是参考图片:
I want to display an image on the right hand side where there is an empty place (the white) but am unsure on how to do this. 我想在右侧有空白处(白色)的位置显示图像,但不确定如何执行此操作。
HTML HTML
<div class="main-content">
<div class="main-box">
<div class="kills-container">
<h1>5600</h1>
</div>
<div class="label-container">
<p>Kills</p>
</div>
</div>
</div>
CSS CSS
.main-box {
display: flex;
flex-direction: column;
box-sizing: border-box;
background-color: white;
height: 120px;
width: 23%;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
}
.kills-container {
display: flex;
flex: 1;
justify-content: flex-end;
background-color: red;
width: 50%;
}
.kills-container h1 {
margin: 0;
position: relative;
right: 10%;
align-self: flex-end;
font-weight: normal;
}
.label-container {
display: flex;
flex: 1;
justify-content: flex-end;
width: 50%;
background-color: green;
}
.label-container p {
margin: 0;
position: relative;
right: 12%;
top: 20%;
align-self: flex-start;
font-weight: lighter;
}
Thank you! 谢谢! :)
:)
.main-content { width: 100%; } img { float: right; padding-left: 20%; position: relative; top: 0; margin-top: -100%; height: 80px; } .second-div { display : flex; flex-direction: row; padding-left: 40%; height: 10px; } .main-box { display: flex; flex-direction: column; box-sizing: border-box; background-color: white; height: 120px; width: 23%; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1); } .kills-container { display: flex; flex: 1; justify-content: flex-end; background-color: red; width: 50%; } .kills-container h1 { margin: 0; position: relative; right: 10%; align-self: flex-end; font-weight: normal; } .label-container { display: flex; flex: 2; justify-content: flex-end; width: 50%; background-color: green; } .label-container p { margin: 0; position: relative; right: 12%; top: 20%; align-self: flex-start; font-weight: lighter; }
<div class="main-content"> <div class="main-box"> <div class="kills-container"> <h1>5600</h1> </div> <div class="label-container"> <p>Kills</p> </div> <div class="second-div"> <img src="http://s7.orientaltrading.com/is/image/OrientalTrading/13577317?$PDP_VIEWER_IMAGE$" /> </div> </div> </div>
You want to have two divs inside main-box, one for each side, and then position them using flex-row for the main-box. 您想要在主机箱中有两个div,每一侧各有一个div,然后使用flex-row为主机箱放置它们。
HTML HTML
<div class="main-content">
<div class="main-box">
<div class="left-side">
<div class="kills-container">
<h1>5600</h1>
</div>
<div class="label-container">
<p>Kills</p>
</div>
<div class="right-side">
<img src="yourimage"
</div>
</div>
</div>
CSS CSS
.main-box {
display: flex;
flex-direction: row;
box-sizing: border-box;
background-color: white;
height: 120px;
width: 23%;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
}
.left-side {
display: flex;
flex-direction: column;
}
right-sire {
display: flex;
flex-direction: column;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.