Inline-block div не принимает ширину в процентах от ширины содержимого - PullRequest
Новая
       5

Inline-block div не принимает ширину в процентах от ширины содержимого

3 голосов
/ 11 апреля 2019

Я пытаюсь добиться того, чтобы <div class="second"> определял ширину его содержимого, но, как вы можете видеть, ширина его дочерних элементов в процентах - вот почему он не работает.Когда я назначаю дочерним элементам фиксированную ширину, например, 200 пикселей, тогда она работает так, как должна.Позвольте мне вставить код здесь: 

.first {
  width: 100%;
  text-align: center;
}

.second {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

.third {
  width: 20%;
  display: block;
  float: left;
}

img {
  width: 100%;
  display: block;
}
<div class="first">
  <div class="second">
    <div class="third">
      <img src="http://via.placeholder.com/640x360">
    </div>
    <div class="third">
      <img src="http://via.placeholder.com/640x360">
    </div>
  </div>
</div>

Вот перо: https://codepen.io/anon/pen/MRmpYY

Попробуйте изменить 20% на 200 пикселей в этом пере, и вы поймете, что я пытаюсь сделать.

Ответы [ 3 ]

0 голосов
/ 11 апреля 2019

Если вы просто хотите центрировать свой контент, почему бы вам не попробовать display: flex и justify-content: center на вашем .second div. 

.first {
  width: 100%;
  text-align: center;
}

.second {
  display: flex;
  justify-content: center;
}

.third {
  width: 20%;
}

img {
  width: 100%;
}
<div class="first">
  <div class="second">
    <div class="third">
      <img src="http://via.placeholder.com/640x360">
    </div>
    <div class="third">
      <img src="http://via.placeholder.com/640x360">
    </div>
  </div>
</div>

Или, если вы готовы изменить html, вы можете фактически удалить .second и иметь только один родительский контейнер.

Вы также можете убрать большую часть своего CSS и достичь того же результата - как это: 

.first {
  width: 100%;
  display: flex;
  justify-content: center;
}

.third {
  width: 20%;
}

img {
  width: 100%;
}
<div class="first">
  <div class="third">
    <img src="http://via.placeholder.com/640x360">
  </div>
  <div class="third">
    <img src="http://via.placeholder.com/640x360">
  </div>
</div>

EDIT

Обновлено с новым пониманием вопроса: Добавлен max-width к изображению, вместо ширины .third div. 

.first {
  width: 100%;
  background: orange;
  display: flex;
  justify-content: center;
}

.second {
  background: purple;
  display: flex;
}

img {
  width: 100%;
  max-width: 200px;
  padding: 5px;
  display: block;
}
<div class="first">
  <div class="second">
    <div class="third">
      <img src="http://via.placeholder.com/640x360">
    </div>
    <div class="third">
      <img src="http://via.placeholder.com/640x360">
    </div>
  </div>
</div>
0 голосов
/ 11 апреля 2019

В вашем контейнере inline-block (second) установлено width: auto - это означает, что его значение определяется его содержимым. То же самое относится и к плавающим элементам, которые вы поместили в них (third):

10.3.9 'Inline-block', non-replaced elements in normal flow

Если для 'width' установлено значение 'auto', используемым значением является ширина сжатия , как для плавающих элементов .

При указании ширины

Когда вы указываете width: 200px для third, контейнер second уменьшается до этого значения. 

.first {
  width: 100%;
  text-align: center;
}

.second {
  display: inline-block;
  width: auto;
  vertical-align: middle;
  border: 1px solid red;
}

.third {
  width: 200px;
  display: block;
  float: left;
}

img {
  width: 100%;
  display: block;
}
<div class="first">
  <div class="second">
    <div class="third">
      <img src="http://via.placeholder.com/640x360">
    </div>
    <div class="third">
      <img src="http://via.placeholder.com/640x360">
    </div>
  </div>
</div>

Если не указана внутренняя ширина

Теперь удалите процентную ширину для контейнера third - ширина second теперь равна 1280px (если ваш видовой экран меньше этого, он сжимается до доступной ширины) - разверните ниже фрагмент экрана во весь экран и проверьте second: 

.first {
  width: 100%;
  text-align: center;
}

.second {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

.third {
  /*width: 20%;*/
  display: block;
  float: left;
}

img {
  width: 100%;
  display: block;
}
<div class="first">
  <div class="second">
    <div class="third">
      <img src="http://via.placeholder.com/640x360">
    </div>
    <div class="third">
      <img src="http://via.placeholder.com/640x360">
    </div>
  </div>
</div>

Теперь переключитесь обратно width: 20% для элемента third и увидите, что он имеет точно 20% от этого значения. Это противоречит тому факту, что проценты разрешены по отношению к родительскому элементу : 

.first {
  width: 100%;
  text-align: center;
}

.second {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

.third {
  width: 20%;
  display: block;
  float: left;
}

img {
  width: 100%;
  display: block;
}
<div class="first">
  <div class="second">
    <div class="third">
      <img src="http://via.placeholder.com/640x360">
    </div>
    <div class="third">
      <img src="http://via.placeholder.com/640x360">
    </div>
  </div>
</div>

Что теперь?

Не имеет смысла устанавливать width: 20%, когда родительский контейнер не имеет заданной ширины. Так что я бы предложил, чтобы вы могли получить примерно такой же эффект, если бы вы могли использовать этот процент для контейнера second:

  • добавить width: 40% в контейнер second

  • используйте дисплей inline-flex, чтобы оба контейнера third располагались рядом друг с другом

См. Демо ниже: 

.first {
  width: 100%;
  text-align: center;
  background: aliceblue;
  border: 1px solid cadetblue;
}

.second {
  display: inline-flex; /* inline container */
  width: 40%; /* <-- 20% for each image section */
  vertical-align: middle;
  border: 1px solid red;
}

.third {
  display: block;
  float: left;
}

img {
  width: 100%;
  display: block;
}
<div class="first">
  <div class="second">
    <div class="third">
      <img src="http://via.placeholder.com/640x360">
    </div>
    <div class="third">
      <img src="http://via.placeholder.com/640x360">
    </div>
  </div>
</div>
0 голосов
/ 11 апреля 2019

Используйте приведенный ниже CSS для достижения желаемого результата. 


    .first { width: 100%; text-align: center; }
    .second {display: inline-block; width: auto; vertical-align: middle; }
    .third { width: 30%; display: inline-block; }
    img {width: 100%; display: block; }

Изменения, которые я сделал в классе ".third": 

1. Removed the "float: left" 
2. Changed "display: block" to "display: inline-block"
...