Все элементы article этого контейнера переносятся так, как должны, но правая граница этого image выходит за границы контейнера article контейнера.

Мой обходной путь - добавить mediaquery @ 1041px и немного padding , чтобы граница никогда не доходила до границы изображения, но должен быть более понятный способ выяснить это.

И с / или без figure результат один и тот же.

article {
      border: solid black;
      border-width: 6px;
      font-family: 'Lato';
      font-size: 2.5em;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      text-justify: distribute;
      padding: 5px;}

figure {
      margin: 0;
      line-height: 0;}

img {
      max-width: 100%;
      height: auto;
      border: black solid;
      border-width: 6px;
      margin: 5px;}

////

  <article>
  <figure>
    <img class="id" src="images/idkort_vit_2.jpg" alt="Marine Heide 
    portrait" />
  </figure>

<div class="intro">
  <div id="one">XXX XXX är född i XXX XXX och bosatt i XXX XXX. 
  </div>

  <div id="two">Hon har vuxit upp i en mångkulturell familj med XXX 
  bakgrund och är verksam som XXX, 
  XXX och XXX.
  </div>

  <div id="three">XXX XXX är doktor vid XXX XXX och har 
  också läst XXX XXX samt 
  XXX XXX på XXX XXX i XXX XXX.
  </div>
</div> 
  </article>

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

0
Yann Heide Biedziński

2 ответа

Вместо этого установите границу для элемента figure:

article {
  border: 6px solid black;
  font-family: 'Lato';
  font-size: 2.5em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-justify: distribute;
  padding: 5px;
}

figure {
  margin: 0;
  line-height: 0;
  border: solid 6px #000;
}

img {
  width: 100%;
}

.intro {
  display: flex;
  flex: 1;
  padding: 5px;
  align-items: center;
  flex-wrap: wrap;
}

#one, #two, #three {
  border: solid black;
  border-width: 6px;
  margin: 5px;
  flex: 2;
}

#three {
  flex: 1;
}
<article>
  <figure>
    <img class="id" src="https://placekitten.com/1200/400" />
  </figure>
  <div class="intro">
    <div id="one">XXX XXX är född i XXX XXX och bosatt i XXX XXX.</div>
    <div id="two">Hon har vuxit upp i en mångkulturell familj med XXX bakgrund och är verksam som XXX, XXX och XXX.</div>
    <div id="three">XXX XXX är doktor vid XXX XXX och har också läst översättning samt tolkning på XXX XXX i XXX.</div>
  </div>
</article>

Попробуйте использовать размер блока: border-box для img , поскольку это будет учитывать добавленную границу и применять margin для figure , чем сам img .

article {
  border: solid black;
  border-width: 6px;
  font-family: 'Lato';
  font-size: 2.5em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-justify: distribute;
  padding: 5px;
}

figure {
  margin: 5px;
  line-height: 0;
}

img {
  max-width: 100%;
  height: auto;
  border: black solid;
  border-width: 6px;
  box-sizing: border-box;
}

.intro {
  display: flex;
  flex-direction: row;
  flex: 1;
  padding: 5px;
  align-items: center;
}

#one {
  border: solid black;
  border-width: 6px;
  margin: 5px;
  flex: 2;
}

#two {
  border: solid black;
  border-width: 6px;
  margin: 5px;
  flex: 2;
}

#three {
  border: solid black;
  border-width: 6px;
  margin: 5px;
  flex: 1;
}
<article>
  <figure>
    <img class="id" src="https://i.postimg.cc/9X9twXdN/idkort-vit-2.jpg" alt="Marine Heide portrait" />
  </figure>
  <div class="intro">
    <div id="one">XXX XXX är född i XXX XXX och bosatt i XXX XXX.</div>
    <div id="two">Hon har vuxit upp i en mångkulturell familj med XXX bakgrund och är verksam som XXX, XXX och XXX.</div>
    <div id="three">XXX XXX är doktor vid XXX XXX och har också läst översättning samt tolkning på XXX XXX i XXX.</div>
  </div>
</article>
58512814