не удалось отобразить какой-либо элемент и текст в нужном месте на карте - PullRequest
Новая
       67

не удалось отобразить какой-либо элемент и текст в нужном месте на карте

1 голос
/ 21 октября 2019

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

enter image description here

my "app.component.html "является следующим 

<mat-toolbar color="primary">
  <div style="width:100%;" class="md-toolbar-tools" >
    Liste des annonces
    <span flex></span>
  </div>
</mat-toolbar>
<div fxLayout="row">
  <div fxFlex="20%"></div>
  <div fxFlex="60%">
    <mat-card *ngFor="let annonce of annonces; let i = index" style="border:red">
        <mat-card-content style="border:blue">
            <img src="./../assets/image/image{{i+1}}.jpg" alt="Avatar" style="position:absolute;top:0px;left:0px;width:40%;height:100%">
            <div class="container" style="left: 45%; top:10px;">
              <div style="left:70%;">{{annonce.dateConstruction | date:'dd MMMM yyyy'}}</div>
              <div>
                <span>{{annonce.type}}</span>
                <span style="float:right">{{annonce.prix}}</span>
              </div>
              <h4>{{annonce.surface}}</h4>
              <h4>{{annonce.adresse}}</h4>
              <div style="left:45%;">
                <p>{{annonce.description}}</p>
              </div>
            </div>
        </mat-card-content>
    </mat-card>
  </div>
  <div fxFlex="20%"></div>
</div>

<router-outlet></router-outlet>

Я ужасен в размещении элементов и текста на html-страницах и, следовательно, в карточке материала. Я получаю следующий вывод в браузере

enter image description here

Кроме того, когда я сжимаю свой браузер, я не вижу элемент и текст на правой частиизображение размещено правильно. Я пытался воспроизвести то же самое на стекле (https://stackblitz.com/edit/angular-pexq15?file=package.json),, но у меня возникли проблемы с метками углового материала, которые не учитываются.

Так что вы могли бы помочь мне и сказать мне, что происходит, изакомментируйте правильный код, чтобы улучшить себя в html / css. Большое спасибо

1 Ответ

1 голос
/ 22 октября 2019

Вы должны попытаться использовать библиотеку @angular/flex-layout для этого. Кроме того, вам следует рассмотреть возможность перемещения ваших стилей в ваш файл CSS, поскольку это сделает ваш HTML-файл намного чище, а стили - более пригодными для повторного использования. В своем стеке вы пропустили включение стилей для @angular/material в свой файл SCSS и не импортировали модуль @angular/flex-layout, поэтому ваши стили были испорчены.

Я пытался исправить ваш пример на Stackblitz. Чтобы получить желаемые интервалы для вашего текста, просто добавьте отступы или поля слева от этих элементов. Также остерегайтесь своего изображения: вы должны добавить свойство подходящей высоты, иначе оно будет обрезано / растянуто.

...