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:
Kiedy zmieniam rozmiar okna, jest mniejsze:
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:
Próbowałem wielu różnych rzeczy, ale nie mogłem tego osiągnąć. Czy masz jakieś rady?
2 odpowiedzi
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>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