我的宽度没有改变，迫使我的 div 分成两行
My width is not changing forcing my divs to break up into two rows
Row
<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> </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;"> 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;"> </span></a><span style="font-weight: bolder;"> <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> </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;"> 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;"> </span></a><span style="font-weight: bolder;"> <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> </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;"> 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;"> </span></a><span style="font-weight: bolder;"> <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> </span></span></div>
<p> </p>
</div>
It seems like the 3rd box doesn't fit into the row?
我尝试重新调整 div 的宽度，但问题似乎不是这个？
但是，当我删除 flex-wrap 选项时，第 3 个框返回到与其他 2 个框相同的行中？
这是因为您的框的宽度固定为 200px，来自以下样式：width: 200px。
您可以改为赋予它们以下属性：
width: 33%;
max-width: 200px;
这将使盒子的 max-width 变为 200px，但如果需要，将宽度调整为容器宽度的 30%，而不是将它们包装成单独的行。
我强烈建议使用 style 标记或 css 文件
重新组织代码
Row
<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> </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;"> 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;"> </span></a><span style="font-weight: bolder;"> <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> </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;"> 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;"> </span></a><span style="font-weight: bolder;"> <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> </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;"> 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;"> </span></a><span style="font-weight: bolder;"> <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> </span></span></div>
<p> </p>
</div>
It seems like the 3rd box doesn't fit into the row?
我尝试重新调整 div 的宽度，但问题似乎不是这个？
但是，当我删除 flex-wrap 选项时，第 3 个框返回到与其他 2 个框相同的行中？
这是因为您的框的宽度固定为 200px，来自以下样式：width: 200px。
您可以改为赋予它们以下属性：
width: 33%;
max-width: 200px;
这将使盒子的 max-width 变为 200px，但如果需要，将宽度调整为容器宽度的 30%，而不是将它们包装成单独的行。
我强烈建议使用 style 标记或 css 文件