Question

以下代码似乎没有包装我的内容。我已经对代码进行了所有可能的更改，但似乎找不到可行的解决方案。实际上，似乎浏览器没有响应自动换行设置。提前致谢。我正在新闻网站上工作。我有一篇文章。一个小的文字和图像将是该网站的主要横幅。为了使网站具有响应性，我需要对文章进行总结。

.mainArticle {
  width: 100%;
  height: 450px;
  display: flex;
  box-sizing: border-box;
  flex-wrap: wrap-reverse;
}

.left,
.right {
  /*float: left;*/
  box-sizing: border-box;
  height: 100%;
  width: 50%;
}

.left {
  /*flex-shrink: 1;
	flex-grow: 1;*/
  padding: 30px;
}

.right {
  padding: 20px;
  position: relative;
  /*display: block;*/
  /*	flex-grow: 0;
	flex-shrink: 0;*/
}

.right img {
  position: relative;
  box-sizing: border-box;
  box-shadow: 5px 5px 6px rgba(242, 125, 12, 0.8);
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  /*display: block;*/
  border-radius: 10px;
}

#heading {
  font-size: 40px;
  font-family: serif;
  font-weight: 700;
  line-height: 1.3;
}

#subHeading {
  margin-top: 10px;
  font-size: 15px;
  font-family: sans-serif;
  text-transform: uppercase;
  line-height: 22.5px;
}

#detail {
  margin-top: 20px;
  padding-right: 10px;
  font-size: 14px;
  font-family: sans-serif;
  line-height: 1.5;
}

#readMore {
  display: inline-block;
  border-radius: 5px;
  padding: 12.5px;
  text-decoration: none;
  color: #f27d0c;
  margin-top: 20px;
  border: 2px solid #f27d0c;
}

<section class="mainBody">
  <div class="mainArticle">
    <div class="left">
      <h1 id="heading">From The Desk of Director</h1>
      <h5 id="subHeading">Excerpt from an interview with Dr. b. k. mishra, director, iit goa</h5>
      <p id="detail">Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id
        euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
      <a id="readMore" href="#">Read More>> </a>
    </div>
    <div class="right">
      <img src="Images/sample.png" />
    </div>
  </div>
  <div id="lineBelowArticle"></div>

</section>

Answer 1

您将width: 50%用于.left, right，这基本上告诉浏览器将父容器的实际宽度缩小为50％。您需要指定这些值，然后flex-wrap就可以正常工作。还需要从height: 100%中删除.mainArticle，并将精确值移至.left, .right（如果要使用它）。如果没有提供height，.left, right将适应他们的孩子（如下所示）。

.mainArticle {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  flex-wrap: wrap-reverse;
}

.left,
.right {
  /*float: left;*/
  box-sizing: border-box;
  width: 600px;
}

.left {
  /*flex-shrink: 1;
	flex-grow: 1;*/
  padding: 30px;
}

.right {
  padding: 20px;
  position: relative;
  /*display: block;*/
  /*	flex-grow: 0;
	flex-shrink: 0;*/
}

.right img {
  position: relative;
  box-sizing: border-box;
  box-shadow: 5px 5px 6px rgba(242, 125, 12, 0.8);
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  /*display: block;*/
  border-radius: 10px;
}

#heading {
  font-size: 40px;
  font-family: serif;
  font-weight: 700;
  line-height: 1.3;
}

#subHeading {
  margin-top: 10px;
  font-size: 15px;
  font-family: sans-serif;
  text-transform: uppercase;
  line-height: 22.5px;
}

#detail {
  margin-top: 20px;
  padding-right: 10px;
  font-size: 14px;
  font-family: sans-serif;
  line-height: 1.5;
}

#readMore {
  display: inline-block;
  border-radius: 5px;
  padding: 12.5px;
  text-decoration: none;
  color: #f27d0c;
  margin-top: 20px;
  border: 2px solid #f27d0c;
}

<section class="mainBody">
  <div class="mainArticle">
    <div class="left">
      <h1 id="heading">From The Desk of Director</h1>
      <h5 id="subHeading">Excerpt from an interview with Dr. b. k. mishra, director, iit goa</h5>
      <p id="detail">Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id
        euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
      <a id="readMore" href="#">Read More>> </a>
    </div>
    <div class="right">
      <img src="Images/sample.png" />
    </div>
  </div>
  <div id="lineBelowArticle"></div>

</section>

Flex Wrap无法正常工作

1 个答案: