两个样式的div彼此相邻[flexbox /响应式]

Question

我正在我的投资组合网站上工作，但遇到了问题。 我尝试使两个div并排站立，并在其中放置文本和图像。 这很容易，但是让它与flexbox响应是一件痛苦的事。

这是我尝试通过flexbox实现的功能，但这只是使用普通的html和css

我使用它的代码（没有flexbox，因为我做错了）：

 #best_cases { height : 800px; } #first_case { width : 650px; height : 577px; float : left; margin : 95px 0 0 211px; border-radius : 5px 5px 0px 5px; background : #1f2930; } #first_case h2 { margin-left : 67px; padding-top : 20px; color : #ffffff; font-family : montserrat bold, arial, verdana; font-size : 2.5em; /* 40/16 */ } #first_case p { margin-left : 67px; padding-top : 8px; color : #ffffff; font-family : montserrat light, arial, verdana; font-size : 1.125em; line-height : 26px; /* 18/16 */ } #first_case img { margin-top : 72.6px; margin-left : 70px; border-bottom-right-radius : 5px; } #second_case { width : 650px; height : 577px; float : left; margin : 95px 0 0 191px; border-radius : 5px; background : #1f2930; } #second_case h2 { margin-right : 67px; padding-top : 20px; color : #ffffff; text-align : right; font-family : montserrat bold, arial, verdana; font-size : 2.5em; /* 40/16 */ } #second_case p { margin-right : 67px; padding-top : 8px; color : #ffffff; text-align : right; font-family : montserrat light, arial, verdana; font-size : 1.125em; line-height : 26px; /* 18/16 */ } #second_case img { margin-top : 72.6px; border-bottom-left-radius : 5px; } 

 <div id="best_cases"> <div id="first_case"> <h2>T3Qvi3w</h2> <p>Shop voor het kopen van <br /> smartphone accessoires.</p> <img src="img/TeQview_small.png" alt="" width="580" height="auto" /> </div> <div id="second_case"> <h2>Studieplaen</h2> <p>De nieuwste manier om <br /> te plannen.</p> <img src="img/Studieplanner_small.png" alt="" width="580" height="380px" /> </div> </a> </div> 

我希望你们现在该做什么。 我会非常有帮助的。

提前致谢。

Answer 1

Flex box是一个流体容器，因此，当您开始在元素上放置固定的像素宽度时，将会破坏它。 对于flex box，更好的做法是使用百分比填充和边距，并使用flex属性控制宽度，以使它们流畅。

例如，这是您的基本设置，但是使用带百分比的flex框用于填充和边距，以及flex属性用于控制对齐，对齐和大小调整。

在生产中，您可能希望添加媒体查询来控制字体大小，因为如果这种布局并排，当您的字体变小时，内容将无法修复容器，从而导致显示问题。

 #best_cases { display: flex; justify-content: center; flex-wrap: no-wrap; width: 100%; } #first_case, #second_case { display: flex; flex-direction: column; justify-content: flex-end; margin: 0; padding: 0; flex-grow: 0; background: #1f2930; border-radius: 5px; } #first_case { text-align: left; margin-right: 1%; } #second_case { text-align: right; margin-left: 1%; } #first_case h2, #second_case h2, #first_case p, #second_case p { color : #ffffff; font-family : montserrat bold, arial, verdana; font-size : 2.5em; padding: 2% 10% 5% 10%; /* 40/16 */ } #first_case h2, #second_case h2 { font-size: 2.5em; /* 40/16 */ } #first_case p, #second_case p { font-size: 1.125em; line-height: 26px; /* 18/16 */ } #first_case img, #second_case img { max-width: 585px; height: auto; } #first_case img { margin-left: 10%; width: 90%; border-bottom-right-radius: 5px; } #second_case p { text-align: right; } #second_case img { margin-right: 10%; width: 90%; border-bottom-left-radius: 5px; } 

 <div id="best_cases"> <div id="first_case"> <h2>Abcdefg</h2> <p>Shop voor het kopen van smartphone accessoires.</p> <img src="http://placehold.it/580x380" alt="" /> </div> <div id="second_case"> <h2>Hijklmn</h2> <p>Shop voor het kopen van smartphone accessoires.</p> <img src="http://placehold.it/580x380" alt="" /> </div> </div>