Добавьте отступ для отображения: table-header-group - PullRequest
Новая
       103

Добавьте отступ для отображения: table-header-group

2 голосов
/ 19 сентября 2019

То, что я хочу создать, это отзывчивый «стол».Так что, если это в браузере, оно должно выглядеть следующим образом:

Имя изображения

Имя изображения

Имя изображения

Однако, когда вы просматриваете его наэкран телефона (или другой небольшой экран), он должен выглядеть следующим образом:

Имя изображения Имя изображения и т. д.

Вот почему я использовал display:table-footer-group; (или table-header-group) дляпереключить порядок столбцов.Это отлично работает, так что все в порядке.Однако все отступы исчезают, и я не знаю, как их читать.В интернете я обнаружил, что <thead> s не имеет отступов, но как еще я могу добавить заполнение сейчас?Потому что, если вы запустите следующий фрагмент, изображение будет слишком близко к тексту. 

.column {
  box-sizing: border-box;
  vertical-align: middle;
  display: table-cell;
}

.left {
  width: 30%;
  padding: 10px;
  padding-left: 40px;
  padding-top: 5%;
}

.left2 {
  width: 70%;
  padding: 10px;
  padding-left: 40px;
}

.right {
  width: 70%;
  padding: 10px;
  padding-right: 40px;
}

.right2 {
  width: 30%;
  padding: 10px;
  padding-right: 40px;
  padding-top: 5%;
}

.row {
  display: table;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

img.team {
  border-radius: 50%;
  display: block;
  width: 100%;
  height: auto;
}

#box {
  border: 1px solid #BFBFBF;
}

.centerjustify {
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  margin-top: 60px;
  margin-bottom: 60px;
  text-align: justify;
}

@media screen and (max-width: 800px) {
  .column {
    width: 100%;
  }
  img.team {
    border-radius: 50%;
    display: block;
    width: 50%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .left {
    display: table-header-group;
  }
  .left2 {
    display: table-footer-group;
  }
  .right2 {
    display: table-header-group;
  }
  .right {
    display: table-footer-group;
  }
}
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <div class="centerjustify">
    <h2>Team Members</h2><br>
    <div id="box">
      <div class="row">
        <div class="column left">
          <img class="team"
            src="https://www.birchgrovedental.co.uk/wp-content/uploads/2016/01/empty-person.jpg">

        </div>
        <div class="column right">
          <h3>test</h3>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
            ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
            dis parturient montes, nascetur ridiculus mus. Donec quam felis,
            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
            quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
            arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
            Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
            Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
            tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
            enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
            Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean
            imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper
            ultricies nisi. Nam eget dui.
          </p>
        </div>
      </div>

      <div class="row">
        <div class="column left2">
          <h3 style="text-align: right;">test</h3>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
            ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
            dis parturient montes, nascetur ridiculus mus. Donec quam felis,
            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
            quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
            arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
            Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
            Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
            tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
            enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
            Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean
            imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper
            ultricies nisi. Nam eget dui.
          </p>
        </div>
        <div class="column right2">
          <img class="team"
            src="https://www.birchgrovedental.co.uk/wp-content/uploads/2016/01/empty-person.jpg">
        </div>
      </div>
    </div>
  </div>

</body>

</html>

Кто-нибудь знает, как это исправить?Заранее спасибо!

Ответы [ 3 ]

2 голосов
/ 19 сентября 2019

Не уверен, почему вы должны использовать display: table, для строки.Изменить порядок div'ов довольно просто, если вы используете flex.Кроме того, это помогает лучше реагировать. Пожалуйста, взгляните на скрипку 

<div class="centerjustify">
        <h2>Team Members</h2><br>
        <div id="box">
            <div class="row">
                <div class="column left">
                    <img class="team" src="https://www.birchgrovedental.co.uk/wp-content/uploads/2016/01/empty-person.jpg">

                </div>
                <div class="column right">
                    <h3>test</h3>

                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                        eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
                        Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
                        Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.</p>
                </div>
            </div>

            <div class="row row--2">
                <div class="column left">
                    <h3 style="text-align: right;">test</h3>

                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                        eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
                        Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
                        Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.</p>
                </div>
                <div class="column right">
                    <img class="team" src="https://www.birchgrovedental.co.uk/wp-content/uploads/2016/01/empty-person.jpg">
                </div>
            </div>
        </div>
    </div>

*, :: after, :: before {box-sizing: border-box;} 

.centerjustify {
    border: 1px solid #eee;
    padding: 15px;
}

.centerjustify h2 {
    text-align: center;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.column {
    padding: 0 15px;
    justify-content: center;
    align-items: center;
}

.left {
    flex: 0 0 30%;
    max-width: 30%;
}

.right {
    flex: 0 0 70%;
    max-width: 70%;
}

.row--2 .left {
    flex: 0 0 70%;
    max-width: 70%;
}

.row--2 .right {
    flex: 0 0 30%;
    max-width: 30%;
}

.team {
    border-radius: 50%;
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (max-width: 767px) {
    .left,
    .right,
    .row--2 .right,
    .row--2 .left {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .row--2 .right {
        order: 1;
    }
    .row--2 .left {
        order: 2;
    }
    .right,
    .left .row--2 .right,
    .row--2 .left {
        width: 100%;
    }
}

0 голосов
/ 19 сентября 2019

попробуйте просто изменить положение объектов в этой строке с помощью медиа-запроса.Не забудьте метатег viewport.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
 .row--2 .left {
float: left;
flex: 0 0 70%;
max-width: 70%;
   }

.row--2 .right {
 float: right;
flex: 0 0 30%;
max-width: 30%;
}

 @media only screen and (max-width: 600px) {
 .row--2 .left {
  float: right;
  flex: 0 0 70%;
  max-width: 70%;
  }

 .row--2 .right {
  float: left;
  flex: 0 0 30%; 
  max-width: 30%;
   }
   }
   </style>
0 голосов
/ 19 сентября 2019

К сожалению,padding 'не применяется к table-header-group и table-footer-group, поэтому, когда вы переходите на мобильные просмотры, они игнорируются.

Подробнее об этом можно прочитать здесь, если вы хотите: https://www.w3.org/TR/CSS2/box.html#propdef-padding

Я бы посоветовал поместить отступ в ваш класс row, такой как 

.row {
  display: table;
  padding: 10px;
 }

И тогда вы сможете стилизовать его так, как вы хотите.

Если вы хотите сохранить table-header-group и table-footer-group в вашем медиазапросе вы не можете оставить свой отступ в .left, .left2, .right или .right2.Надеюсь, что это поможет:)

...