![](/img/trans.png)
[英]How to align text to right side of the container div in flex display?
[英]How to display image on the right side of div without ruining flex layout?
如何在div框的右側插入圖像,而不破壞div中其余元素的彈性布局。 這是參考圖片:
我想在右側有空白處(白色)的位置顯示圖像,但不確定如何執行此操作。
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
.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;
}
謝謝! :)
.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>
您想要在主機箱中有兩個div,每一側各有一個div,然后使用flex-row為主機箱放置它們。
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
.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.