我的網(wǎng)站如下所示：桌面：移動的：我的HTML：<div class="col-lg-3><div class="container--wrap"> <div class="inward-text"> <br> <img src="green-up.png" class="center" style="vertical-align: middle;"> <br> <span style="color: #9BDDB4; font-family: robotobold; font-size: 30px; vertical-align: middle;" "="">4.51%</span> <br> <span style="color: #ffffff; font-family: robotolight; font-weight: lighter; font-size: 15px">from yesterday</span> <img src="red-up.png" class="center" style="padding-top: 30px; vertical-align: middle;"> <br> <br> <br> <br> <div id="txtdown"> <span style="color: #EE939C; font-family: robotobold; font-size: 30px; vertical-align: middle;">1.80%</span> <br> <span style="color: #ffffff; font-family: robotolight; font-weight: lighter; font-size: 15px">from yesterday</span> </div> <img src="flag-ic.png" class="center" style="padding-top: 30px; vertical-align: middle;"> <br> <br> <br> <div id="txtdown"> <span style="color: #AEAEAE; font-family: robotobold; font-size: 30px; vertical-align: middle;">text</span> <br> <span style="color: #ffffff; font-family: robotolight; font-weight: lighter; font-size: 15px">subtext</span> </div> </div> </div></div>相關(guān)CSS：.container--wrap { background-color: #000000; border-radius: 15px; margin: 5px; overflow: hidden;}.col-lg-3 { flex: 0 0 25%; max-width: 25%;}.col { flex-basis: 0; flex-grow: 1; max-width: 100%;}.center { display: block; margin-left: auto; margin-right: auto; width: 135px;}.inward-text span{ display: inline; margin-left: 10px;}.inward-text img{ margin-left: 80px; float: left;}#txtdown{ margin-top: 10px;}我該如何做我想做的事？
3 回答
慕村225694
TA貢獻(xiàn)1880條經(jīng)驗 獲得超4個贊
br 標(biāo)簽這不是最好的方法，我嘗試簡化您的解決方案，用您的圖像和文本塊應(yīng)該如下所示：
<div class="items">
<div class="item red">
<img/>
<div class="item__text">
<span class="percent"></span>
<span class="description"></span>
</div>
</div>
<div class="item green">
<img/>
<div class="item__text">
<span class="percent"></span>
<span class="description"></span>
</div>
</div>
<div class="item grey">
<img/>
<div class="item__text">
<span class="percent"></span>
<span class="description"></span>
</div>
</div>
</div>
CSS
.items {
display: flex;
flex-direction: column;
}
.item {
display: flex;
align-items: center;
}
.item__text {
display: flex;
flex-direction: column;
}
并且不要使用be，使用margin或padding，這是一種更靈活可靠的做法。
慕哥6287543
TA貢獻(xiàn)1831條經(jīng)驗 獲得超10個贊
網(wǎng)頁：
<div class="container--wrap">
<div class="inward-text">
<div class="flex">
<img src="green-up.png" class="center" style="vertical-align: middle;">
<div id="txtdown">
<span style="color: #9BDDB4; font-size: 30px; vertical-align: middle;">4.51%</span>
<span style="color: #ffffff; font-weight: lighter; font-size: 15px">from yesterday</span>
</div>
</div>
<div class="flex">
<img src="green-up.png" class="center" style="padding-top: 30px; vertical-align: middle;">
<div id="txtdown">
<span style="color: #EE939C; font-size: 30px; vertical-align: middle;">1.80%</span>
<span style="color: #ffffff; font-weight: lighter; font-size: 15px">from yesterday</span>
</div>
</div>
<div class="flex">
<img src="green-up.png" class="center" style="padding-top: 30px; vertical-align: middle;">
<div id="txtdown">
<span style="color: #AEAEAE; font-size: 30px; vertical-align: middle;">text</span>
<span style="color: #ffffff; font-weight: lighter; font-size: 15px">subtext</span>
</div>
</div>
</div>
</div>
CSS：
.container--wrap {
background-color: #000000;
border-radius: 15px;
margin: 5px;
overflow: hidden;
}
.flex {
display: flex;
}
.col-lg-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
.inward-text span {
display: inline;
margin-left: 10px;
}
#txtdown {
margin-top: 10px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
Helenr
TA貢獻(xiàn)1780條經(jīng)驗 獲得超4個贊
步驟1
從每個元素中刪除所有內(nèi)聯(lián)樣式，并將它們作為類放置在 CSS 中，如下所示：
.percent {
color: #EE939C;
font-family: robotobold;
font-size: 30px;
vertical-align: middle;
}
.detail {
color: #ffffff;
font-family: robotolight;
font-weight: lighter;
font-size: 15px;
}
第2步
刪除所有<br/>s
步驟3
將每個項目包裝為以下標(biāo)記
<div class="fancy-item"> <!-- your group -->
<img ...>
<div> <!-- flexbox sub-group -->
<span class="percent">1.80%</span>
<span class="detail">from yesterday</span>
</div>
</div>
添加其余的 CSS：
.fancy-item {
display: flex;
align-items: center;
}
步驟4
如果您想將它們稍微分開，請?zhí)砑右恍┑撞窟吘?percent或頂部邊距。.detail
你完成了！
注意：您不必使用我的類名稱，可以使用在您的上下文中有意義的任何名稱。
另請注意：步驟 1-3 是最重要的。如果您不喜歡某個特定細(xì)節(jié)，它們允許您立即更改所有項目，而無需仔細(xì)檢查每個項目并進(jìn)行修改。DRY是編程中最重要的原則之一。
- 3 回答
- 0 關(guān)注
- 171 瀏覽
添加回答
舉報
0/150
提交
取消