Вопросы Теги

Почему мои DIVS не реагируют на какие-либо ширины, которые я им даю? 

function timeDifference(date1, date2) {
  var oneDay = 24 * 60 * 60; // hours*minutes*seconds
  var oneHour = 60 * 60; // minutes*seconds
  var oneMinute = 60; // 60 seconds
  var firstDate = date1.getTime(); // convert to milliseconds
  var secondDate = date2.getTime(); // convert to milliseconds
  var seconds = Math.round(Math.abs(firstDate - secondDate) / 1000); //calculate the diffrence in seconds
  // the difference object
  var difference = {
    "days": 0,
    "hours": 0,
    "minutes": 0,
    "seconds": 0,
  }
  //calculate all the days and substract it from the total
  while (seconds >= oneDay) {
    difference.days++;
    seconds -= oneDay;
  }
  //calculate all the remaining hours then substract it from the total
  while (seconds >= oneHour) {
    difference.hours++;
    seconds -= oneHour;
  }
  //calculate all the remaining minutes then substract it from the total 
  while (seconds >= oneMinute) {
    difference.minutes++;
    seconds -= oneMinute;
  }
  //the remaining seconds :
  difference.seconds = seconds;
  //return the difference object
  return difference;
}
console.log(timeDifference(new Date(2017,0,1,0,0,0),new Date()));

0
задан Pete 13 July 2018 в 11:29
поделиться

3 ответа

В flexbox вместо настройки ширины вы можете попробовать другой подход.

ширина столбцов разделяется на себя, чтобы переопределить ширину столбца, вы можете использовать стиль flex, например flex: 0 0 5%;

его можно охарактеризовать как 

flex: <flex-grow> <flex-shrink> <flex-basis>;

. Это сокращенное выражение для гибкого роста, гибкой термоусадочной и гибкой основы

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

1
ответ дан ATUL DIVEDI 17 August 2018 в 13:04
поделиться

Пожалуйста, проверьте приведенный ниже рабочий пример на основе вашего кода, установите ширину столбцов как flex: 0 0 5%; вместо width: 5%. 

@media screen and (min-width: 800px) {
  .row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    border-bottom: 1px solid black;
    width: 100%;
  }
  .column {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .h-30vh {
    height: 30vh;
  }
  .w-5per {
    -ms-flex: 0 0 5%;
    flex: 0 0 5%;
    max-width: 5%;
    justify-content: center;
    align-content: center;
  }
  .bg-pink {
    background-color: pink;
  }
  .bg-purple {
    background-color: purple;
  }
  .bg-red {
    background-color: red;
  }
  .bg-salmon {
    background-color: salmon;
  }
  .column span {
    font-size: 18pt;
    display: flex;
  }
  .d-flex {
    display: flex;
  }
  .pt-1em {
    padding-top: 1em;
  }
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="row h-30vh">
  <div class="column bg-pink w-5per">
    <span class="fa fa-user">&nbsp;</span>
  </div>
  <div class="column bg-red">
    <div>&nbsp;</div>
  </div>
</div>

<!-- User info/Settings row -->
<div class="row h-30vh">
  <div class="column bg-purple w-5per">
    <span class="fa fa-cog">&nbsp;</span>
  </div>
  <div class="column bg-red d-flex">&nbsp;</div>
  <div class="column bg-red d-flex">&nbsp;</div>
</div>

<!-- Messages/Chat row -->
<div class="row h-25vh bg-salmon">
  <div class="column w-5per">
    <span class="fa fa-comment">&nbsp;</span>
  </div>
  <div class="column bg-red pt-1em">
    <div>&nbsp;</div>
    <div>&nbsp;</div>
  </div>
</div>

0
ответ дан Girish 17 August 2018 в 13:04
поделиться

просто попробуйте указать max-width или min-width вместо ширины

-1
ответ дан Krishna Devashish 17 August 2018 в 13:04
поделиться