Question

我正在我的投资组合网站上工作并遇到问题。我试着让两个div彼此相邻，里面有文字和图像。这很容易，但是使用flexbox对它做出响应是很麻烦的。

This is what I try to achieve with flexbox, but this is just with plain html and css

我使用它的代码（没有flexbox，因为我只是没有把它弄好）：

＆＃13;

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

＆＃13;

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

＆＃13;

我希望你们现在该做什么。我会非常乐于助人。

提前致谢。

Answer 1

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 /响应]

1 个答案: