Укажите ширину карты материала как родительскую во встроенном div

Я делаю встроенный div с тремя столбцами и добавляю мат-карту слева. При этом из-за относительного положения мат-карты div смещается вниз. И при выполнении абсолютной позиции мат-карта приходит в положение, которое я хотел, однако ширина не регулируется как родительская. Может кто-нибудь помочь мне ?

Это мой HTML

<div id='main'>
  <div [style.background]="'blue'" id='components'>
    <mat-card>
        <mat-card-title>Components</mat-card-title>
        <mat-card-content>Inside it</mat-card-content>
    </mat-card>

  </div>
  <div [style.background]="'white'" id='preview'>
  </div>
  <div [style.background]="'red'" id='properties'>
  </div>
</div>

И css

#main{
    height:calc(100vh - 64px);

    #components{
    width:30% !important;
    display: inline-block;
    height:100%;
    }

   #preview{
    width:40% !important;
    display: inline-block;
    height:100%;
   }

   #properties{
    width:30% !important;
    display: inline-block;
    height:100%;
    }
}
mat-card{
position:absolute;
}

Ниже приводится вывод введите описание изображения здесь

Я хочу настроить карту в левом div.

Пожалуйста помогите !!!!!


html css angular6 angular-material-6
person Dhiraj Dhakal    schedule 04.12.2018    source источник
comment
Скажите, пожалуйста, точное место, где вы хотите разместить свою карточку.   -  person Atul Rajput    schedule 04.12.2018

Ответы (2)


arrow_upward
1
arrow_downward

А пока я выровнял вашу матовую карту с нижней частью div и взял 100% ширину родительского элемента. Назовите мне позицию, в которой вы хотите разместить мат-карту, я улучшу ответ.

#main{
    height:calc(100vh - 64px);
}
    #components{
    width: 30% !important;
    float: left;
    height: 100%;
    background: green;
    display: flex;
    align-items: flex-start;
    }
    mat-card {
    width: 100%;
    background: yellow;
  }

   #preview {
    width: 40% !important;
    float: left;
    height: 100%;
    background: red;
}

   #properties {
    width: 30% !important;
    float: left;
    height: 100%;
    background: yellow;
}
}
<div id='main'>
  <div [style.background]="'blue'" id='components'>
    <mat-card>
        <mat-card-title>Components</mat-card-title>
        <mat-card-content>Inside it</mat-card-content>
    </mat-card>

  </div>
  <div [style.background]="'white'" id='preview'>
  </div>
  <div [style.background]="'red'" id='properties'>
  </div>
</div>

person Atul Rajput    schedule 04.12.2018
comment
Это сработало, однако карта остается внизу, а ваше решение в нижнем не работает для мат-карты, карта все еще перетекает в красный div. Не могли бы вы сказать мне разместить компонент наверху без использования позиции? - person Dhiraj Dhakal; 05.12.2018
comment
Хорошо, это будет работать, если для align-item установлено значение flex-start вместо flex-end в компоненте . - person Dhiraj Dhakal; 05.12.2018
comment
да, используйте flex-start, и решение, которое я дал ниже, будет работать, но вам нужно указать позицию относительно первого div Ie. родитель мат карты. и если что-то из этого поможет, отметьте этот ответ правильно. Спасибо - person Atul Rajput; 05.12.2018
comment
Я помечен как выполненный, можете ли вы настроить элемент align-item на гибкий запуск? - person Dhiraj Dhakal; 08.12.2018

arrow_upward
0
arrow_downward

другое решение для вас без использования гибкости и только абсолютное положение. Проверь это.

#main{
    height:calc(100vh - 64px);
}
    #components{
    width: 30% !important;
    float: left;
    height: 100%;
    background: green;
    position: relative;
    }
    mat-card {
    width: 100%;
      display: block;
    background: yellow;
      position: absolute;
      top: 10px;
  }

   #preview {
    width: 40% !important;
    float: left;
    height: 100%;
    background: red;
}

   #properties {
    width: 30% !important;
    float: left;
    height: 100%;
    background: yellow;
}
<div id='main'>
  <div [style.background]="'blue'" id='components'>
    <mat-card>
        <mat-card-title>Components</mat-card-title>
        <mat-card-content>Inside it</mat-card-content>
    </mat-card>

  </div>
  <div [style.background]="'white'" id='preview'>
  </div>
  <div [style.background]="'red'" id='properties'>
  </div>
</div>

person Atul Rajput    schedule 04.12.2018