Question

我创建了这个布局，它几乎在那儿，但是我正努力处理它旁边的图像和文本。我希望整个框同时弯曲，以保持图像和文本同时响应。

我在做什么错？我认为我患有精神障碍，因为这是我第一次使用flex。

.container {
  max-width: 1750px;
}

.venture,
#event-content,
#news-content {
  background-color: #eaeaea;
  color: #444;
}

.catch {
  color: #fff;
  text-align: center;
  margin: 1vmin 0vmin 0vmin 0vmin;
  padding: 20px 50px;
  background-color: #3366cc;
}

.tagline {
  margin-top: 5%;
  text-align: center;
  font-weight: bold;
  font-size: 130%;
}

#news-content a:link,
#news-content a:hover,
#news-content a:visited {
  text-decoration: none;
  color: #444;
  font-family: FG Font;
  font-size: 2vmin;
}

#news-content .btn.btn-primary {
  background-color: #3366cc;
  font-family: Arial;
  border-color: #3366cc;
}

#news-content .tag {
  background-color: #ef8b1e;
  display: inline-block;
  padding: 5px;
  border-radius: 0px 0px 5px 5px;
  font-size: 1.5vmin;
  font-family: FG Font;
}

#news-content .title {
  padding: 25px 10px 0px 10px;
}

#event-content .date {
  background-color: #ef8b1e;
  font-family: FG Font;
  font-size: 3vmin;
  display: inline-block;
  text-align: center;
}

.main-wrapper {
  display: flex;
  flex-wrap: nowrap;
  height: 70vh;
  align-items: stretch;
}

.main-wrapper>div {
  width: 50%;
  min-height: 50vh;
}

.hero-img {
  display: flex;
}

.hero-img>div {
  margin: 1vmin;
  align-self: stretch;
  flex-basis: 50%;
}

.info-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.info-section .media-section {
  margin: 1vmin 0vmin;
}

.info-section .venture {
  position: relative;
  padding: 3vmin 3vmin 2vmin 3vmin;
}

.media-section>div {
  display: flex;
  flex-direction: row;
}

.media-section>div>div {
  flex-basis: 50%;
}

#news-content {
  margin-right: .5vmin;
}

#event-content {
  margin-left: .5vmin;
}

#news-content,
#event-content {
  max-height: 150px;
}

<div class="container">
  <div class="main-wrapper">
    <div>
      <div class="hero-img">
        <div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Ship" /></div>
        <div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Ship" /></div>
      </div>
      <div class="hero-img">
        <div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Air" /></div>
        <div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Helicopter" /></div>
      </div>
    </div>
    <div>
      <div class="info-section">
        <div class="catch">
          <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
        </div>
        <div class="media-section">
          <div>
            <div id="news-content">
              <div class="tag">In the News</div>
              <div class="title"><a href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></div>
              <a href="">
                <div class="btn btn-primary">Link</div>
              </a>
            </div>
            <div id="event-content">
              <div class="date">
                <div class="num">12</div>
                <div class="month">DEC</div>
              </div>
              <div class="details">
                <div class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
                <div class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
              </div>
            </div>
          </div>
        </div>
        <div class="venture">
          <h2>Lorem ipsum dolor sit ametn<br>Lorem ipsum dolor sit amet</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam diam non mollis sollicitudin. Curabitur sed felis ac urna laoreet finibus nec eu sem. Fusce cursus tortor eget lectus lacinia, id blandit dolor ultrices. Aliquam pellentesque
            venenatis turpis, a viverra ante tincidunt vel. Quisque dui orci, viverra id ipsum eget, dictum mattis ante. Aliquam pellentesque massa et euismod efficitur. Aliquam vestibulum velit et lobortis feugiat. Curabitur vulputate quam efficitur,
            pellentesque ex quis, tincidunt orci. Donec magna est, ultrices nec pretium nec, porta id nisl. Mauris vitae magna ac sem pellentesque hendrerit. Donec elit justo, pulvinar id leo posuere, venenatis mattis nisl. Maecenas tristique augue ut
            odio tincidunt aliquam. Nullam volutpat lobortis eros.</p>
          <div class="tagline">LOREM IPSUM</div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

不确定是否要这样做，可以在同一列中完成整个容器：

   <pre>
    <div class="container">
            <div class="main-wrapper">

                <div>
                    <div class="info-section">
                        <div>
                            <div class="hero-img">
                                <div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Ship" /></div>
                                <div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Ship" /></div>
                            </div>
                            <div class="hero-img">
                                <div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Air" /></div>
                                <div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Helicopter" /></div>
                            </div>
                        </div>
                        <div class="catch">
                            <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
                        </div>
                        <div class="media-section">
                            <div>
                                <div id="news-content">
                                    <div class="tag">In the News</div>
                                    <div class="title"><a href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></div>
                                    <a href="">
                                        <div class="btn btn-primary">Link</div>
                                    </a>
                                </div>
                                <div id="event-content">
                                    <div class="date">
                                        <div class="num">12</div>
                                        <div class="month">DEC</div>
                                    </div>
                                    <div class="details">
                                        <div class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
                                        <div class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="venture">
                            <h2>Lorem ipsum dolor sit ametn<br>Lorem ipsum dolor sit amet</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam diam non mollis sollicitudin. Curabitur sed felis ac urna laoreet finibus nec eu sem. Fusce cursus tortor eget lectus lacinia, id blandit dolor ultrices. Aliquam pellentesque
                               venenatis turpis, a viverra ante tincidunt vel. Quisque dui orci, viverra id ipsum eget, dictum mattis ante. Aliquam pellentesque massa et euismod efficitur. Aliquam vestibulum velit et lobortis feugiat. Curabitur vulputate quam efficitur,
                               pellentesque ex quis, tincidunt orci. Donec magna est, ultrices nec pretium nec, porta id nisl. Mauris vitae magna ac sem pellentesque hendrerit. Donec elit justo, pulvinar id leo posuere, venenatis mattis nisl. Maecenas tristique augue ut
                               odio tincidunt aliquam. Nullam volutpat lobortis eros.</p>
                            <div class="tagline">LOREM IPSUM</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
   </pre>

带图片的flexbox，固定大小

1 个答案: