CSS - разделить ширину в процентах от родительской - PullRequest
Новая
       50

CSS - разделить ширину в процентах от родительской

0 голосов
/ 06 мая 2020

Я присвоил своим div минимальную ширину.

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

Я не могу жизнь меня выясняет, почему я не могу исправить эту глупость.

Любая помощь будет оценена.

https://jsfiddle.net/q6u3sh5f/

In скрипт выше, вы можете видеть, что белая граница обертки расширяет ширину окна, но у моих div есть собственный ум. 

<html>
  <body>
    <div class = "wrap">
      <div class="date">Date</div>
      <div class="month">Month</div>
      <div class="task">Task</div>
      <div class="status">Status</div>
    </div>
  </body>
</html>

body {
  background-color: #4efa6d;
}

.wrap {
  width: 100%;
  border: 1px solid white;
}

.date {
  min-width: 60px;
  width: 6.25%;
  float: left;
  border: 1px solid red;
  margin: 5px;
  padding: 5px;
}

.month {
  min-width: 70px;
  width: 6.25%;
  float: left;
  border: 1px solid red;
  margin: 5px;
  padding: 5px;
}

.task {
  min-width: 540px;
  width: 67.5%;
  width: auto;
  float: left;
  border: 1px solid red;
  margin: 5px;
  padding: 5px;
}

.status {
  min-width: 100px;
  width: 12.50%;
  float: left;
  border: 1px solid red;
  margin: 5px;
  padding: 5px;
}

Ответы [ 2 ]

1 голос
/ 06 мая 2020
  1. Вы можете использовать flex. (Надеюсь, это не проблема)
  2. float уже устарело.
  3. Я переехал px на случайное % для min-width, не стесняйтесь изменять это.

скрипка для воспроизведения. 

body {
  background-color: #4efa6d;
}

.wrap {
  width: 100%;
  border: 1px solid white;
  display:flex;
}

.date, .month {
  min-width: 2%;
  width: 6.25%; 
  border: 1px solid red;
  margin: 5px;
  padding:5px;
}

.task {
  min-width: 10%;
  width: 67.5%;
  margin: 5px;
 padding:5px; 
  border: 1px solid red;

}

.status {
  min-width: 5%;
  width: 12.5%;
  border: 1px solid red;
  margin: 5px;
  padding:5px;
}
<html>
  <body>
    <div class = "wrap">
      <div class="date">Date</div>
      <div class="month">Month</div>
      <div class="task">Task</div>
      <div class="status">Status</div>
    </div>
  </body>
</html>
0 голосов
/ 06 мая 2020

Когда ширина div с классом wrap достигает 960px, ширина дочернего элемента, равная 6.25%, достигает 60px, что равно min-width, которое вы установили для этого div, что равно 60, поэтому и происходит

...