Как выровнять div по горизонтали на разных экранах, таких как рабочий стол, мобильные телефоны и т. Д. c? - PullRequest
Новая
       0

Как выровнять div по горизонтали на разных экранах, таких как рабочий стол, мобильные телефоны и т. Д. c?

0 голосов
/ 12 марта 2020

Я пытаюсь отобразить div по горизонтали, т. Е. «Флажок вместе с некоторым содержимым [div]».

Код: 

.manager_feed_div_block {
  content: "";
  display: table;
  clear: both;
}

.appstatus {
  float: left;
  margin-top: 40px;
  margin-right: 10px;
}

.manager_feed_div {
  background: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  float: left;
  border: 1px solid #dbdbdb;
  padding: 5px;
  margin-right: 20px;
  margin-bottom: 20px;
  width: 218px;
  text-align: left;
  position: relative;
  margin-top: 20px;
}
<!DOCTYPE html>
<html>

<head>
  <title>Title of the document</title>
</head>

<body>
  <div class="manager_feed_div_block">
    <div class="appstatus">
      <input type="checkbox" name="app_status" />
    </div>
    <div class="manager_feed_div">
      some content
    </div>
    <div class="appstatus">
      <input type="checkbox" name="app_status" />
    </div>
    <div class="manager_feed_div">
      some content
    </div>
    <div class="appstatus">
      <input type="checkbox" name="app_status" />
    </div>
    <div class="manager_feed_div">
      some content
    </div>
    <div class="appstatus">
      <input type="checkbox" name="app_status" />
    </div>
    <div class="manager_feed_div">
      some content
    </div>
    <div class="appstatus">
      <input type="checkbox" name="app_status" />
    </div>
    <div class="manager_feed_div">
      some content
    </div>
    <div class="appstatus">
      <input type="checkbox" name="app_status" />
    </div>
    <div class="manager_feed_div">
      some content
    </div>
    <div class="appstatus">
      <input type="checkbox" name="app_status" />
    </div>
    <div class="manager_feed_div">
      some content
    </div>
    <div class="appstatus">
      <input type="checkbox" name="app_status" />
    </div>
    <div class="manager_feed_div">
      some content
    </div>
  </div>
</body>

</html>

Вывод:

Output of what I am tried

Здесь я столкнулся с двумя проблемами

1.Я хочу, чтобы «флажок и соответствующий ему div» приходили как группа. Но когда вы замечаете вывод, который я получил, «В конце первой строки флажок отделен от соответствующего ему div».

2. Он не отвечает.

Ответы [ 2 ]

0 голосов
/ 12 марта 2020

Вы можете сделать что-то подобное с CSS -Grid: 

.manager_feed_div_block {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-gap: 10px;
}

.manager_feed_div_block .container {
  display: grid;
  grid-template-columns: min-content auto;
  grid-gap: 10px;
}
<div class="manager_feed_div_block">
  <div class='container'>
    <div class="appstatus">
      <input type="checkbox" name="app_status" />
    </div>
    <div class="manager_feed_div">
      some content
    </div>
  </div>
  <div class='container'>
    <div class="appstatus">
      <input type="checkbox" name="app_status" />
    </div>
    <div class="manager_feed_div">
      some content
    </div>
  </div>
  <div class='container'>
    <div class="appstatus">
      <input type="checkbox" name="app_status" />
    </div>
    <div class="manager_feed_div">
      some content, some longer content, to see how this breaks.
    </div>
  </div>
  <div class='container'>
    <div class="appstatus">
      <input type="checkbox" name="app_status" />
    </div>
    <div class="manager_feed_div">
      some content
    </div>
  </div>
  <div class='container'>
    <div class="appstatus">
      <input type="checkbox" name="app_status" />
    </div>
    <div class="manager_feed_div">
      some content
    </div>
  </div>
  <div class='container'>
    <div class="appstatus">
      <input type="checkbox" name="app_status" />
    </div>
    <div class="manager_feed_div">
      some content
    </div>
  </div>
  <div class='container'>
    <div class="appstatus">
      <input type="checkbox" name="app_status" />
    </div>
    <div class="manager_feed_div">
      some content
    </div>
  </div>
  <div class='container'>
    <div class="appstatus">
      <input type="checkbox" name="app_status" />
    </div>
    <div class="manager_feed_div">
      some content
    </div>
  </div>

Краткое объяснение 

grid-template-columns: repeat(auto-fill, 200px);

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

grid-template-columns: min-content auto;

предотвратит разбиение флажка и содержимого на новые строки. grid-gap:10px; определит интервал между отдельными контейнерами с одной стороны и вашим текстовым содержимым и флажком с другой.

Довольно просто.

Можно найти краткое введение в CSS -Сетка здесь: https://www.w3schools.com/css/css_grid.asp

0 голосов
/ 12 марта 2020

Макет варьируется от редактора к редактору. Итак, попробуйте изменить эту часть. 

 <style>  
      .manager_feed_div_block{ content:"";display:table;clear:both;}
      .appstatus{float:left;margin-top:40px;margin-right: 10px;}
      .manager_feed_div{background:#fff; -webkit-border-radius: 4px; -moz-border-radius: 4px ; border-radius: 4px;  float:left; border:1px solid #dbdbdb; padding:5px; margin-right:20px; margin-bottom:20px; width:218px; text-align:left; position:relative; margin-top:20px;}
    </style>

В моем редакторе размером 1135 x 672 я получаю это: - enter image description here

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

Нет похожих вопросов

...