Mam coś takiego:

HTML:

<div id="container">
    <img src="leftphoto.jpg" id="left">
    <div id="right">Description</div>
</div>

CSS:

body {
  margin: 0;
  padding: 0;
  background-color:#252525;
}
#container{
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  margin-top: 100px;
  margin-bottom: 100px;
  height: 40vw;
}
#left{
  max-width: 75vw;
  height:100%;
}
#right{
  min-width: 300px;
  height:100%;
  color:white;
  width:20vw;
  background-color: red;
  color: #ffffff;
  font-size: 11px;
  overflow: auto;
}

Chcę, aby prawy element DIV znajdował się w dół, pod lewym elementem DIV o tej samej szerokości. Jak mogę to osiągnąć?

Co ja mam:

enter image description here

Kiedy zmieniam rozmiar okna, jest mniejsze:

enter image description here

Ale chcę, aby prawy element div był niższy, pod lewym elementem div, a także chciałbym uzyskać taką samą szerokość na obu elementach div:

enter image description here

Próbowałem wielu różnych rzeczy, ale nie mogłem tego osiągnąć. Czy masz jakieś rady?

-1
neves 28 marzec 2020, 18:35

2 odpowiedzi

Najlepsza odpowiedź

Aby to osiągnąć, możesz użyć flex blox. Po prostu umieść na pojemniku div. Gdy to zrobisz, możesz zmienić położenie elementów div o flex-direction wiersz / kolumnę. Podobnie, aby umieścić drugi element div powyżej pierwszego elementu div po zmniejszeniu rozmiaru, możesz ustawić zapytanie o media dla określonego ekranu, na którym możesz odwrócić kolumnę i gotowe.

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



@media screen and (max-width:768px){
  .container{
    display: flex;
    flex-direction: column-reverse
  }
}
<div class="container">
  <div>
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
  </div>
  <div class="content">
    <p>Content</p>
  </div>
</div>
0
Mr Khan 28 marzec 2020, 15:44

Utwórz drugi kontener w swoim html, a zostaną one naturalnie wyrównane pod sobą

<div class="container">
      <div class="content-Container">
        <img src="leftphoto.jpg" id="left" />
        <div id="right">Description</div>
      </div>
    </div>

A następnie umieść je na środku strony, dodając styl do kontenera nadrzędnego

0
ShrewdStyle 28 marzec 2020, 15:41