0

Блоки проходят сквозь друг друга при уменьшении размера экрана,блок проходит сквозь форму и скозь футер не оттаокивая ниже стоящие,как исправить?

<section>
        <div class="wrapper">
          <div class="about-work" id="mywork">
            <h1>Мои работы</h1>
            <p>Эти работы являются примером</p>
            <div class="my-work">
              <div><h3>first</h3>
                  <div class="my-work-1 box">
                    <a href="#"><img class="my-pic" src="img/first.jpg" alt=""></a>
                  </div>
               </div>
              <div class="my-work-2 box"><h3>second</h3>
                  <div>
                    <a href="#"><img class="my-pic" src="img/second.jpg" alt=""></a>
                  </div>
               </div>
              <div class="my-work-3 box"><h3>third</h3>
                  <div>
                    <a href="#"><img class="my-pic" src="img/third.jpg" alt=""></a>
                  </div>
               </div>
               <div class="my-work-4"><h3>fourth</h3>
                  <div>
                    <a href="#"><img class="my-pic" src="img/fourth.jpg" alt=""></a>
                  </div>
               </div>
               <div class="my-work-5"><h3>fifth</h3>
                  <div>
                    <a href="#"><img class="my-pic" src="img/fifth.jpg" alt=""></a>
                  </div>
               </div>
               <div class="my-work-6"><h3>sixth</h3>
                  <div>
                    <a href="#"><img class="my-pic" src="img/fifth.jpg" alt=""></a>
                  </div>
               </div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <div class="wrapper">
      <div class="mail">
        <form action="">
          <label for="name">
                  <input type="text" id="name" name="text" placeholder="Имя">
          </label>
          <label for="mail">
                  <input type="text" id="mail" name="text" placeholder="Ваш ящик">
          </label><br>
          <label for="obj">
                  <input type="text" id="obj" name="text" placeholder="Тема">
          </label><br>
          <label for="sms">
          <textarea rows="5" id="sms"  cols="50" placeholder="Ваше сообщение">
          </textarea>
          </label><br>
          <input type="submit" value="Написать мне" class="btn">
        </form>
      </div>
    </div>
section .my-work
{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-around;
    flex-flow: wrap;
    margin-top: 3vw;
    margin-left: 2%;
    margin-right: 2%;
}
.wrapper .mail
{
    margin: 0 auto;
    width: 50%;
    vertical-align: middle;
    background-color: #fff;
    font-size: 3em;
    box-shadow:  0 14px 28px rgba(0,0,0,0.25),
    0 10px 10px rgba(0,0,0,0.22);
}

form
{
    height: 8em;
}

блоки

8
  • 1
    Разметку тоже добавьте.
    – zhurof
    9 окт 2018 в 13:13
  • Извиняюсь, добабил. 9 окт 2018 в 13:16
  • 1
    у вас в html не все теги, не удаётся воспроизвести проблему. Но есть мнение, что ваша проблема из-за css-правил типа form{ height:8em } . Высоту принудительно лучше вообще не задавать.
    – zhurof
    9 окт 2018 в 13:25
  • Изменил еще раз html, для каких элементов лучше этого не делать ,касаемо высоты именно?(убрал высоту,не изменилось) 9 окт 2018 в 13:31
  • 1
    Да не за что. По поводу каким не задавать: да в общем то всем блокам с контентом больше одного символа(или картинки), т.к. высота контента и его количество имеет свойство меняться в зависимости от ширины и/или желания владельца сайта.
    – zhurof
    9 окт 2018 в 13:52

1 ответ 1

1

Приведите в порядок html. У Вас там полный бардак, не понятно что к чему и где.

В стилях добавила box-sizing: border-box; чтобы учитывались внутренние отступы для ширины блоков. И для работ ширину в 50% - 2 колонки

* {
  box-sizing: border-box;
}

section .my-work {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-around;
    flex-flow: wrap;
    margin-top: 3vw;
    margin-left: 2%;
    margin-right: 2%;
  margin-bottom: 2rem;
}

.box {
  width: 50%;
}

.wrapper .mail {
    margin: 0 auto;
    width: 50%;
    vertical-align: middle;
    background-color: #fff;
    font-size: 3em;
    box-shadow:  0 14px 28px rgba(0,0,0,0.25),
    0 10px 10px rgba(0,0,0,0.22);
}

form {
  height: 8em;
  padding: .5em;
}

label {
  display: block;
}

input,
textarea {
  display: block;
  width: 100%;
}

img {
  max-width: 100%;
}
<section>
  <div class="wrapper">
    
    <div class="about-work" id="mywork">
      <h1>Мои работы</h1>
      <p>Эти работы являются примером</p>
      
      <div class="my-work">
        <div class="my-work-1 box">
          <h3>first</h3>
          <div >
            <a href="#">
              <img class="my-pic" src="https://images.unsplash.com/photo-1539010295638-0677479e7f50?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0d787f17d310ea3a5ecb17359960126f&auto=format&fit=crop&w=600&q=60" alt="">
            </a>
          </div>
        </div>
        
        <div class="my-work-2 box">
          <h3>second</h3>
          <div>
            <a href="#">
              <img class="my-pic" src="https://images.unsplash.com/photo-1539010295638-0677479e7f50?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0d787f17d310ea3a5ecb17359960126f&auto=format&fit=crop&w=600&q=60" alt="">
            </a>
          </div>
        </div>
        
        <div class="my-work-3 box">
          <h3>third</h3>
          <div>
            <a href="#">
              <img class="my-pic" src="https://images.unsplash.com/photo-1539010295638-0677479e7f50?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0d787f17d310ea3a5ecb17359960126f&auto=format&fit=crop&w=600&q=60" alt="">
            </a>
          </div>
        </div>          
          
        <div class="my-work-4 box">
          <h3>fourth</h3>
          <div>
            <a href="#">
              <img class="my-pic" src="https://images.unsplash.com/photo-1539010295638-0677479e7f50?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0d787f17d310ea3a5ecb17359960126f&auto=format&fit=crop&w=600&q=60" alt="">
            </a>
          </div>
        </div>
          
        <div class="my-work-5 box">
          <h3>fifth</h3>
          <div>
            <a href="#">
              <img class="my-pic" src="https://images.unsplash.com/photo-1539010295638-0677479e7f50?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0d787f17d310ea3a5ecb17359960126f&auto=format&fit=crop&w=600&q=60" alt="">
            </a>
          </div>
        </div>
          
        <div class="my-work-6 box">
          <h3>sixth</h3>
          <div>
            <a href="#">
              <img class="my-pic" src="https://images.unsplash.com/photo-1539010295638-0677479e7f50?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0d787f17d310ea3a5ecb17359960126f&auto=format&fit=crop&w=600&q=60" alt="">
            </a>
          </div>
        </div>
          
      </div>
    </div>
  </div>  
</div>
</section>
  <div class="wrapper">
    <div class="mail">
      <form action="">
        <label for="name">
          <input type="text" id="name" name="text" placeholder="Имя">
        </label>
        <label for="mail">
          <input type="text" id="mail" name="text" placeholder="Ваш ящик">
        </label><br>
        <label for="obj">
          <input type="text" id="obj" name="text" placeholder="Тема">
        </label><br>
        <label for="sms">
          <textarea rows="5" id="sms"  cols="50" placeholder="Ваше сообщение">
          </textarea>
        </label><br>
        <input type="submit" value="Написать мне" class="btn">
      </form>
    </div>
  </div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.