Блог

Строка

 <div class="container" style="display:flex;
    flex-direction: row;
    justify-content: left;
    align-items: left;
display: flex;
margin-bottom: 25px;
margin-left: -45px;
flex-wrap: wrap;
    ">
<p>amp;nbsp;</p>

<div class="box" style=" width: 210px; height: 340px; display:flex; border-style: dotted; border-width: 1px; border-color: rgb(230, 230, 230);  flex-direction: column; max-width: 25rem; min-width: 18rem; align-items: left; justify-content: left;  margin: 0px; 
    text-align: left;"><a href="http://www.example.com/" style="text-align: center; top: 25px;"><img font-family:lucida="" sans="" src="/images/contentimages/images/Baby - Copy 2.png" style="width: 208px; height: 208px; display: block; margin: auto; position: relative; top: 10px;" /><strong><span style="font-size:20px;"><span style="font-family:lucida sans unicode,lucida grande,sans-serif;"></span></span></strong></a><strong></strong><br />
<span style="font-size:18px;">amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; Baby<a href="https://dummyimage.com/350x300/000/fff" style="color: rgb(116, 15, 110); text-align: center; top: 25px;"><span style="font-size: 18px;">amp;nbsp;</span></a><span style="font-weight: bolder;">amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp;amp;nbsp;<a class="btn btn-info btn-sm edatalayer order-1" data-list="product-listing-page" data-position="1" data-purl="custom-business-forms" href="http://www.example.com/">View details <i class="far fa-chevron-right pl-1"></i></a>amp;nbsp; amp;nbsp; </span></span></div>

<div class="box" style=" width: 210px; height: 340px; display:flex; border-style: dotted; border-width: 1px; border-color: rgb(230, 230, 230);  flex-direction: column; max-width: 25rem; min-width: 18rem; align-items: left; justify-content: left;  margin: 0px; 
    text-align: left;"><a href="http://www.example.com/" style="text-align: center; top: 25px;"><img font-family:lucida="" sans="" src="/images/contentimages/images/Birthday - Copy 5.png" style="width: 208px; height: 208px; display: block; margin: auto; position: relative; top: 10px;" /><strong><span style="font-size:20px;"><span style="font-family:lucida sans unicode,lucida grande,sans-serif;"></span></span></strong></a><strong></strong><br />
<span style="font-size:18px;">amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp;amp;nbsp;Birthday<a href="https://dummyimage.com/350x300/000/fff" style="color: rgb(116, 15, 110); text-align: center; top: 25px;"><span style="font-size: 18px;">amp;nbsp;</span></a><span style="font-weight: bolder;">amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp;amp;nbsp;<a class="btn btn-info btn-sm edatalayer order-1" data-list="product-listing-page" data-position="1" data-purl="custom-business-forms" href="http://www.example.com/">View details <i class="far fa-chevron-right pl-1"></i></a>amp;nbsp; amp;nbsp; </span></span></div>

<div class="box" style=" width: 210px; height: 340px; display:flex; border-style: dotted; border-width: 1px; border-color: rgb(230, 230, 230);  flex-direction: column; max-width: 25rem; min-width: 18rem; align-items: left; justify-content: left;  margin: 0px; 
    text-align: left;"><a href="http://www.example.com/" style="text-align: center; top: 25px;"><img font-family:lucida="" sans="" src="/images/contentimages/images/Business_Greetings - Copy 3.png" style="width: 208px; height: 208px; display: block; margin: auto; position: relative; top: 10px;" /><strong><span style="font-size:20px;"><span style="font-family:lucida sans unicode,lucida grande,sans-serif;"></span></span></strong></a><strong></strong><br />
<span style="font-size:18px;">amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; Business Greetings<a href="https://dummyimage.com/350x300/000/fff" style="color: rgb(116, 15, 110); text-align: center; top: 25px;"><span style="font-size: 18px;">amp;nbsp;</span></a><span style="font-weight: bolder;">amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp;<a class="btn btn-info btn-sm edatalayer order-1" data-list="product-listing-page" data-position="1" data-purl="custom-business-forms" href="http://www.example.com/">View details <i class="far fa-chevron-right pl-1"></i></a>amp;nbsp; amp;nbsp; </span></span></div>

<p>amp;nbsp;</p>
</div>
 

Похоже, что 3-й блок не вписывается в строку?

Я попытался изменить ширину div, но, похоже, проблема не в этом?

Однако, когда я удаляю опцию flex-wrap, 3-й блок возвращается в ту же строку, что и 2 других блока?

Это потому, что ваши поля имеют фиксированную ширину 200 пикселей из этого стиля : width: 200px .

Вместо этого вы можете предоставить им эти атрибуты:

 width: 33%; 
max-width: 200px;
 

Это позволит полям иметь max-width 200px значение, но при необходимости изменять ширину, чтобы иметь 30% ширину контейнера, не заставляя их переноситься в отдельные строки.

Я настоятельно рекомендую реорганизовать код с помощью style тега или файла css