两个相邻的样式 div [flexbox/responsive]

Question

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

This is what I try to achieve with flexbox, but this is just with plain html and 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 属性来控制宽度，这样你就可以让它们流畅。

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

在生产中，您可能希望添加媒体查询来控制字体大小，因为使用这种并排布局，当您变得足够小时，您的内容将无法修复容器，您将有显示问题。

#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>

两个相邻的样式 div [flexbox/responsive]

Two styled divs next to each other [flexbox/ responsive]

html

css

portfolio

flexbox

responsive