Изо всех сил, чтобы стиль div с html / css в приложении реакции

Question

Поскольку я изучаю html / css, я работаю и делаю несколько примеров, и я хочу создать div, который бы выглядел так, но мой контент «склеен» вместе.

Я пробовал различные способы * * * * * *, и никто из них не подходит, поскольку я действительно новичок в html / css!

Если вы запустите код ниже, вы можете увидеть, что он выглядит плохо, между текстами нет пробела, ничего не выровнено по вертикали, и я не знаю, как расположить размер к середине div.

Вот мой код:

<div style={{ background: '#e1e1e1', marginBottom: '5px' }}>
  <span id="delete" style={{ float: 'right', display: 'inline-block', padding: '2px 5px' }}>
    x
  </span>
  <i className="icon ion-md-checkmark-circle" />
  TestImg1.PNG
  3.98KB
</div>

Может кто-нибудь помогите мне достичь этого с объяснением, как это делается, чтобы я мог многому научиться на этом. Спасибо и ура!

Спасибо

Answer 1

Вы можете использовать Flexbox для управления макетом и упорядочением ваших элементов. Установите display: flex на родительском <div>. Определите порядок ваших элементов, используя свойство ordering, где один будет первым, а три последним. После этого присвойте элементу удаления margin-left: auto; pu sh его концу родительского элемента <div>. Вы можете увидеть код, представленный здесь: Пример Codepen

<div style={{ display: 'flex', background: '#e1e1e1', marginBottom: '5px', padding: '2px 5px' }}>
    <span id="delete" style={{ order: '3', marginLeft: 'auto' }}>
        x
    </span>
    <i className="icon ion-md-checkmark-circle" style={{ order: '1' }} />
    <span style={{ order: '2', marginRight: '10px' }}>
        TestImg1.PNG 3.98KB
    </span>
</div>

Answer 2

Вы также можете попробовать Flex .

<div style={{ background: '#e1e1e1', marginBottom: '5px', display:flex }}>
  <I style={{flex: 0}} className="icon ion-md-checkmark-circle" />
  <span style={{flex: 1, marginLeft: 8px}}>
    TestImg1.PNG
  </span>
  <span style={{flex: 1}}>
    3.98KB
  </span>
  <span id="delete" style={{ flex: 0, padding: '2px 5px' }}>
    x
  </span>
</div>

display: flex применяется к контейнеру.

flex: 1 применяется к текстам и это означает автоматически растягивается с коэффициентом 1.

flex: 0 применяется к значкам, и это означает не растягивать.

Если вы хотите узнать больше, возьмите взгляд на здесь

Answer 3

Вместо этого вы можете использовать сеточную систему bootstrap.

<div class="container">
  <div class="row row-grey align-items-center">
    <div class="col-2">
    <i class="material-icons icon-green">
        check_circle
    </i>
    </div>
    <div class="col-3">
      File.png
    </div>
    <div class="col-6">
      52kb
    </div>
    <div class="col-1">
      x
    </div>
  </div>  
</div>

Вот скрипка