как сделать перемещение div на середину в соответствии с дизайном, учитывающим ширину экрана - PullRequest
Новая
       9

как сделать перемещение div на середину в соответствии с дизайном, учитывающим ширину экрана

0 голосов
/ 12 июня 2018

Я пытаюсь создать шаблон веб-сайта, и у меня есть 3 деления, которые имеют одинаковый размер, и когда я редактирую его на codepen с помощью моего ноутбука, он выглядит идеально по центру, но когда я использую свой монитор (экран которого намного больше)) все дивы смещены в одну сторону.Как мне сделать мои divs реагировать на изменение ширины экрана.В этом случае я хочу, чтобы мои div-ы объединялись в середине страницы, если экран широкий, но если это экран ноутбука, я хочу, чтобы div-ы заполняли пространство.

Вот кодовая ручкачтобы показать вам, как это выглядит сейчас: https://codepen.io/chenius/pen/eKvRKp/

фрагмент кода для одного из элементов div: 

.post1{
position: absolute;
width: 392px;
height: 500px;
background-color: #F1F0F0;
margin-top: 50px;
margin-left: 40px;

}

Ответы [ 3 ]

0 голосов
/ 13 июня 2018

Я вижу, что вы используете некоторые классы Bootstrap.Будет ли проще использовать сетку Bootstrap, чтобы упростить ее?Возможно, попробуйте использовать класс col-sm-4 для 3 столбцов, чтобы сделать его отзывчивым.Если не Bootstrap, я использую 3 делителя и перемещаю их влево с шириной 33,3% или 33%, если вы хотите использовать интервал, а затем используйте медиа-запрос, чтобы разбить его на 50%, а затем на 100%.

Также я бы попытался настроить таргетинг на тот же класс, чтобы предотвратить написание повторяющихся CSS для этих столбцов

0 голосов
/ 13 июня 2018

Вы можете попробовать Отзывчивую сетку веб-дизайна , аналогично предложению @ Trace751 Bootstrap.

0 голосов
/ 12 июня 2018

Если вы добавите кодовую ручку, попробуйте указать только вашу проблему.Я обновил ваш кодекс.Если вы пытаетесь создать адаптивный дизайн, не используйте px в качестве размера.Если вы попытаетесь стилизовать все блоки с абсолютным положением, у вас не будет контроля в вашем CSS.

Попробуйте использовать display: flex в сочетании с шириной % и, возможно, максимальной шириной в зависимости от ваших стилевых предпочтений 

#bodyposts {
  background-color: white;
  width: 100%;
  display: flex;
  justify-content: center; 
  /*border: 1px solid black;*/
}
.post { 
  width: calc(100% / 3); 
  max-width: 368px; 
}
<div id="bodyposts">
  <div class="post1 post">
    <img src="https://photos-5.dropbox.com/t/2/AACOIvsj9S-Od_SOp3CrZNZD9a2-vgB9txeSuP95IDvWhA/12/731836158/jpeg/32x32/1/_/1/2/1-1.jpg/ELC5uLQIGA4gBygH/CN4xmVMBYozkdoVkY_yXluv4Yao68hgbv0V95K7Tjy4?size=2048x1536&size_mode=3" id="post1img"/>
    <p class="text-success">Bootstrap V3.3.6</p>
    <p id="post1para">Morbi sagittis justo a velit placerat ullamcorper quis quis velit. Sed convallis at risus ullamcorper auctor. Praesent quis velit neque. Quisque semper porta nisi vitae suscipit. Duis lectus magna, ornare ac scelerisque.</p>
    <div class="text-center"><button type="button" class="btn btn-success">Button Green</button></div>
  </div>
  <div id="post2" class="post">
    <img src="https://photos-3.dropbox.com/t/2/AAA0wm6tg1X1K7zHZG5l6nZGnfHWobZLJTB4L12PBjLRhQ/12/731836158/jpeg/32x32/1/_/1/2/1-2.jpg/ELC5uLQIGA8gBygH/simGKuHsNbmiQz63msz6lnpI4VntyYBKZScXTOh08PY?size=1280x960&size_mode=3" id="post2img"/><h3 class="text-primary">Responsive Desgn</h3>
    <p id="post2para">Conquer Template is provided by templatemo for free of charge. You can use this template for any kind of website. No credit link is required. All images by Unsplash. Thank you for visiting our website. Please come again!</p>
    <button type="button" class="btn btn-primary">Button Blue</button>
  </div>
  <div id="post3" class="post">
  <img src="https://photos-2.dropbox.com/t/2/AABT_1USaAxiBj120M9ai5jS-hYbSHGkRn0yDJhQeC4rNg/12/731836158/jpeg/32x32/1/_/1/2/1-3.jpg/ELC5uLQIGA8gBygH/APtdBotAnn4vJycbaWyxY84b1TmaxKy3x2JChb8NLOE?size=1280x960&size_mode=3" id="post3img"><h3 id="post3h3">Parallax Scroll</h3>
    <p id="post3para">Morbi sagittis justo a velit placerat ullamcorper quis quis velit. Sed convallis at risus ullamcorper auctor. Praesent quis velit neque. Quisque semper porta nisi vitae suscipit. Duis lectus magna, ornare ac scelerisque.</p>
    <button type="button" class="btn btn-secondary">See Details </button>
  </div>
</div>

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

...