具有多個元素的框中的css/sass問題-有解無憂

我有一個問題，我建立這個影像：

盒子

正如你所看到的，它是一個里面有 4 個元素的盒子。它看起來不錯，但是當我開始重新調整視窗大小時，它變得一團糟。我知道我做錯了什么，但我會給你一個正在發生的事情的 .gif

https://imgur.com/gallery/VZQAKFY

當我重新調整視窗大小時，這就是我的代碼：

html:

<div class="containerRebalance">
<div class= firstTittleRow1>
 <div class="iconwarning">
   <mat-icon  [ngStyle]="{'color':'#f06f0f'}">warning</mat-icon>
 </div>
<div class= secondTittleRow>
  <div class="textoWarning">
    Para enviar tu solicitud de modificación, es necesario
    que los porcentajes de participación por cada
    beneficiario sea mayor a cero y que la suma de las
    participaciones en cada prioridad sea igual al 100% 
  </div>
 </div>
 <div class="linetext">
 <div class="texto1">
  <p class="texto1">
    ?Desea repartir en partes iguales el porcentaje
    de participación de la  {{prioridad}}?
  </p>
 </div>

   <div class="texto2">
    Yes
  </div>
  <div class="texto2">
   No
 </div>
 </div>
 </div>
 </div>

SASS

.texto1
  float: left
  margin-top: -1px
  margin-left: 12px
  font-size: 14px
  line-height: 21px
  font-family: "Titillium Web", sans-serif
  font-weight: 400
  color: rgb(96, 110, 125)
.texto2
  font-size: 14px
  line-height: 21px
  font-family: "Titillium Web", sans-serif
  font-weight: 400
  color: rgb(96, 110, 125)
  float: right
  padding-right: 55px

.iconwarning
  float: left
  padding-top: 24px

.firstTittleRow1
  padding-left: 10px
  height: 73px
  display: block

.linetext
  display: block

.textoWarning
  font-size: 14px
  line-height: 18px
  font-family: "Titillium Web", sans-serif
  font-weight: 400
  color: rgb(96, 110, 125)
  padding-top: 20px




.secondTittleRow
  display: flex
  padding-left: 10px
  height: 73px
.containerRebalance
    height: 113px
    background: #fdf6e9
    border: 1px solid #f9ce93
    color: #4d5966
    font-size: 0.75rem
    font-family: Roboto-Medium
    align-items: center
    padding: 0 0.9375rem
    line-height: 17px
    margin-top: 48px
    padding-bottom: 1px

我怎樣才能讓它看起來不像那樣？并保持這 4 個元素的順序在里面，我不介意按鈕是否下降，但保持主廣場的順序。非常非常

uj5u.com熱心網友回復：

從 .containerRebalance、.secondTittleRow 和 .firstTittleRow1 中移除固定高度，并將 display:flex 添加到 .containerRebalance

.containerRebalance
// height: 113px 'Remove This'
background: #fdf6e9
border: 1px solid #f9ce93
color: #4d5966
font-size: 0.75rem
font-family: Roboto-Medium
align-items: center
padding: 0 0.9375rem
line-height: 17px
margin-top: 48px
padding-bottom: 1px
display: flex

.firstTittleRow1
  padding-left: 10px
  // height: 73px 'Remove This'
  display: block

.secondTittleRow
  display: flex
  padding-left: 10px
  // height: 73px 'Remove This'

你可以在這里看到

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/492194.html

標籤：html css 有角度的引导程序 4 粗鲁的

上一篇：如何設定導航欄？

下一篇：在img頂部居中div而不使用位置