Как создать 3-х ящик с разными размерами?

marie спросил: 13 июня 2018 в 09:49 в: html

Я пытаюсь создать 3 окна, одну большую коробку и две маленькие рядом с ней. Во всех коробках у меня есть изображения. Проблема в том, что два небольших ящика не реагируют на какие-либо устройства, он отлично работает на рабочем столе. Я действительно потерял и не могу найти, где я делаю неправильно, и я работаю со вчерашнего дня.

.fashion_look img {
  width: 100%;
  display: inline;
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: opacity 0.5s, transform 0.5s;
}

.main-container .block-container .fashion_look .content {
  position: absolute;
  top: 5%;
  left: 0%;
  width: 100%;
  text-align: center;
  padding: 0 35px;
}

.main-container .block-container {
  display: inline-block;
  width: 100%;
  float: left;
}

.main-container .widget-static-block {
  display: block;
  overflow: hidden;
  padding-top: 60px;
}

.main-container .block-container .banner_top,
.main-container .block-container .new_shoes,
.main-container .block-container .fashion_look {
  position: relative;
  overflow: hidden;
}

.main-container .block-container .overlay {
  bottom: 0;
  height: auto;
  left: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.2s ease-in-out 0.1s;
  -moz-transition: all 0.2s ease-in-out 0.1s;
  -webkit-transition: all 0.2s ease-in-out 0.1s;
  -o-transition: all 0.2s ease-in-out 0.1s;
  width: auto;
  z-index: 2;
}

.main-container .block-container .new_shoes .content {
  position: absolute;
  top: 10%;
  left: 0%;
  width: 60%;
  text-align: center;
  padding: 0 35px;
}

<div class="widget widget-static-block">
  <div class="block-container">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <div class="fashion_look">
        <div class="overlay">&nbsp;</div>
        <a href="https://www.acureorganics.com/skin.html"><img src="#></a><br>
        <div class="content">
          <h3>&nbsp;</h3>
        </div>
      </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <div class="new_shoes">
            <div class="overlay">&nbsp;</div>
            <img src="#">
            <div class="content">&nbsp;</div>
          </div>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <div class="overlay">&nbsp;</div>
          <div class="banner_top">
            <a href="https://www.acureorganics.com/body.html"><img src="#"></a>
          </div>
          <div class="banner_top">
            <div class="content">&nbsp;</div>
            <div class="content">&nbsp;</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

2 ответа

Есть решение
Jhecht ответил: 13 июня 2018 в 10:15

Я был не уверен, где вы ожидали, что боковая секция появится на мобильном телефоне, поэтому здесь она отображается ниже основного раздела. Обратите внимание, что цвета bg были добавлены только для того, чтобы было ясно, как выглядит каждый раздел.

body, html{
  height:100%;
  }
  
  
  .container-fluid,
  .container-fluid .row{
    height:100%;}
<link href="https://unpkg.com/bootstrap@4.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-md-8 bg-primary text-white">
      <h2>Main Column</h2>
    </div>
    <div class="col-12 col-md-4">
      <div class="row px-md-3">
        <div class="col-12 mb-md-3 bg-dark text-white">
          Top Secret
        </div>
        <div class="col-12 bg-warning">
          Bottom Secret
        </div>
      </div>
    </div>
  </div>
</div>

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

marie ответил: 13 июня 2018 в 12:45
Спасибо, Jhecht, как вы делаете мир красивым :), но единственная проблема прямо сейчас у меня есть то, что если я не стану тело, html {height: 100%;} мои ящики очень маленькие, как я могу исправить это
Jhecht ответил: 13 июня 2018 в 04:47
Не зная, где элемент сидит на странице, трудно сказать. На самом деле вам нужно, чтобы родительский контейнер + основной элемент строки имел высоту того, что вам нужно.
marie ответил: 14 июня 2018 в 11:24
Я хочу его посередине моей страницы. как я могу это сделать, вы можете дать мне пример plz
Jhecht ответил: 14 июня 2018 в 07:27
Что вы подразумеваете под "в середине моей страницы"? Есть ли пункты выше этого раздела? Это в jumbotron / hero? Не зная больше о макете, это действительно игра с угадыванием на моей стороне.
Jhecht ответил: 18 июня 2018 в 01:53
@marie. Я более чем готов помочь вам, но мне нужно некоторое разъяснение.
Steve Mulvihill ответил: 13 июня 2018 в 10:15

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

Если я добавлю этот CSS, он будет работать:

img {
  width: 100%;
  height: auto;
}

Взгляните на эту скрипку.

marie ответил: 13 июня 2018 в 12:42
Спасибо Стиву :), но я пробовал это, но только изображения становятся все меньше, я хочу, чтобы они как друг друга переходили на более мелкие устройства.