Сетка начальной загрузки (или IE-совместимая сетка CSS) для данного макета - PullRequest
0 голосов
/ 21 октября 2019

Можете ли вы предложить, как сделать следующий макет без CSS-сетки, в Bootstrap или IE-совместимой CSS-сетке.
На большом экране
голова, тело на левой стопке и изображение справа, покрывающее высоту головы и тела.
[ - макет на большом экране ]
на маленьком экране
Укладка головы, изображения и тела на всю ширину;изображение посередине. [ - макет на маленьком экране ]

1 Ответ

0 голосов
/ 21 октября 2019

Вы хотите сказать, что вам нужна сетка начальной загрузки, совместимая с браузером IE?

Если да, то попробуйте привести пример ниже.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <style>
  .div
  {
  height:100px;
  }
  .div2
  {
  height:200px;
  }
  </style>
</head>
<body>

<div class="container-fluid">
  <h1>Grid</h1>
  <p>In large screen : head, body on left stacking and image on right covering height of head and body.</p>
  <p>In small screen : Head, image and body stacking, full width; image in middle.</p>          
  <p>Resize the browser window to see the effect.</p>
  
  <div class="row">
    <div class="col-lg-6 col-sm-12 div" style="background-color:orange;">
      Heading-<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="col-lg-6 col-sm-12 div2 pull-right" style="background-color:green;">
      Image-<br> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.    
    </div>
     <div class="row">
     <div class="col-lg-6 col-sm-12 div" style="background-color:yellow;">
      Body-<br> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.    
    </div>
     </div>
  </div>
</div>
    
</body>
</html>

Попробуйте запустить код в браузере вместо фрагмента кода, чтобы получить фактический результат.

Вывод на большой экран:

enter image description here

Вывод на маленький экран:

enter image description here

Далее вы можетеизмените код в соответствии с вашими требованиями.

Если мы что-то неправильно поняли из вашего описания выше, чем сообщите нам об этом. Мы постараемся исправить себя и предоставить дальнейшие предложения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...