国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

所以我試圖創(chuàng)建一個模板，其中一個 div 是圖片，另一個是帶背景的文本。現(xiàn)在我想讓這個模板響應(yīng)式，以便文本以特定的 px 寬度位于圖片下方。通過 stackoverflow，我看到無數(shù)的帖子說你應(yīng)該使用 Flexbox。我嘗試過，但我無法完全正確。

所以在桌面上它應(yīng)該看起來像這樣：https://i.stack.imgur.com/HDehv.jpg 在智能手機上它應(yīng)該跳到這里https://i.stack.imgur.com/D4VOh。 .jpg

我需要在兩側(cè)留有邊距，至少在桌面版本上是這樣。現(xiàn)在我的問題是，我的圖片在我的網(wǎng)站上沒有限制并且變得太大，正在發(fā)生自動切換到行（據(jù)我所知）。

我的代碼在這里：https://jsfiddle.net/wqesp83a/

.container {
  display: inline-flex;
  border: 1px solid black;
  margin: 5%;
  width: 90%;
}

.flex-direction {
  flex-direction: row;
}

.div1 {
  display: flex;
  border-right: 1px solid black;
}

h {
  color: #90bd49;
  font-size: 30px;
}

p {
  color: #333333;
  font-size: 16px;
}

.div2 {
  display: flex;
  background-color: #fff;
  max-width: 50%;
  padding: 1%;
  background-color: #e3e3e3;
}

span {
  font-size: 16px;
  text-align: left;
}

@media only screen and (min-width: 0px) and (max-width: 500px) {
  .flex-direction {
    flex-direction: column;
  }
  .div1 {
    max-width: 100%;
    border-right: none;
    border-bottom: 1px solid black;
  }
  .div2 {
    max-width: 100%;
  }
  .container {
    margin: 0%;
  }

<div class="container flex-direction">
  <div class="div1"><span><img alt="Fotoabzüge" src="https://s3.eu-central-1.amazonaws.com//pbx-sw-profotolab/media/79/95/4c/1673964627/bild4_(1).jpg" width="100%" height="100%"  /></span></div>
  <div class="div2"><span><h>Lorem ipsum</h> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.</p> </span></div>
</div>

我試圖限制 div 和圖片的寬度和高度，但要么它沒有幫助，要么我會進一步破壞整個事情。如果有人可以幫助我看到我的錯誤，我將非常感激。