Элементы сетки не выравниваются

Я пытаюсь выровнять элемент <p> по левому краю, а изображение по правому. Изображение не будет выравниваться по четвертому столбцу, и мне нужно это исправить.

.content{
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 25% 25% 25% 25%;
  padding: 1cm;
  height: 500px;
}

#subcontent img {
  grid-column: 4;
  grid-row: 1;
}
<div class="content">
  <div id="subcontent">
    <h3>Lorem Ipsum</h3>
    <img src="https://i.imgur.com/6MJo1wH.png"/>
  </div>
</div>


html css css-grid
person Leqso Bezarashvili    schedule 22.09.2018    source источник
comment
Я не вижу ссылки на класс .references в вашем HTML.   -  person Roy    schedule 22.09.2018
comment
О, да, я пропустил это, но мне все еще интересно, нужно ли указывать высоту, а также могут ли элементы ‹img› выравниваться независимо?   -  person Leqso Bezarashvili    schedule 22.09.2018
comment
Это выглядит хорошо. Подконтент находится именно там, где вы сказали, что он должен быть. В чем проблема?   -  person Lazar Nikolic    schedule 22.09.2018
comment
Да, все нормально, я неправильно написал имя класса, но теперь, когда я пытаюсь выровнять изображение в сетке, это все равно не работает. Можете ли вы объяснить, как правильно выровнять изображение в сетке?   -  person Leqso Bezarashvili    schedule 22.09.2018
comment
Я хотел бы вам помочь, но вы должны поместить часть html и css там, где виден тег img.   -  person Lazar Nikolic    schedule 22.09.2018
comment
Я обновил код с изображением. Я хочу, чтобы это изображение было выровнено по четвертому столбцу сетки, но оно не двигалось, даже когда я использую для него отдельный <div>. Можете ли вы помочь мне с этим?   -  person Leqso Bezarashvili    schedule 22.09.2018
comment
1. Там нет элемента p, 2. Если это так, то сетка должна быть на #subcontent div.   -  person VXp    schedule 22.09.2018
comment
Да, я перепутал элемент p с элементом h3.   -  person Leqso Bezarashvili    schedule 22.09.2018

Ответы (2)


arrow_upward
2
arrow_downward

Это то, что вы хотите? ваш img не является прямым дочерним элементом сетки, поэтому назначение ему grid-column не будет работать.

.content{
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 25% 25% 25% 25%;
  padding: 1cm;
  height: 500px;
}

.content img {
  grid-column: 4;
  grid-row: 1;
  max-height: 100%;
  max-width: 100%;
}
<div class="content">
    <h3>Lorem Ipsum</h3>
    <img src="https://i.imgur.com/6MJo1wH.png"/>
</div>

person Chris Li    schedule 22.09.2018

arrow_upward
2
arrow_downward

Я не совсем уверен, какой макет вы здесь использовали, но вы указали, что ваш 4-й столбец занимает 2 строки. Создание этой 1 строки помещает все в линию:

.references {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 25% 25% 25% 25%;
  padding: 1cm;
  height: 500px;
}

#subcontent {
  grid-column: 4;
  grid-row: 1;
}
<div class="references">
  <div>
    <h3>Lorem Ipsum</h3>
    <p>Nam volutpat pharetra velit in scelerisque. Etiam at dapibus justo. Ut porta enim massa, vel commodo nunc tincidunt eu. Sed sit amet eleifend turpis.</p>

  </div>
  <div>
    <h3>Lorem Ipsum</h3>
    <p>Nam volutpat pharetra velit in scelerisque. Etiam at dapibus justo. Ut porta enim massa, vel commodo nunc tincidunt eu. Sed sit amet eleifend turpis.</p>

  </div>
  <div>
    <h3>Lorem Ipsum</h3>
    <p>Nam volutpat pharetra velit in scelerisque. Etiam at dapibus justo. Ut porta enim massa, vel commodo nunc tincidunt eu. Sed sit amet eleifend turpis.</p>

  </div>

  <div id="subcontent">
    <h3>Lorem Ipsum</h3>
    <p>Nam volutpat pharetra velit in scelerisque. Etiam at dapibus justo. Ut porta enim massa, vel commodo nunc tincidunt eu. Sed sit amet eleifend turpis.</p>
  </div>
</div>

person MichaelvE    schedule 22.09.2018