我有这样的东西:
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;
}
我希望右div下降,在左div下具有相同的宽度。我该如何实现?
我有:
<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS85OWl3dC5qcGcifQ==” alt =“在此处输入图像描述”>
当我调整窗口大小时,它会变小:
<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9SVk9NYy5wbmcifQ==” alt =“在此处输入图像描述”>
但是我希望右div在左div下下降,而且我想在两个div上获得相同的宽度:
<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9RU244TS5wbmcifQ==” alt =“在此处输入图像说明”>“ >>
我尝试了很多不同的事情,但是我无法实现。您有什么建议吗?
我有这样的东西:HTML:
您可以使用flex blox实现此目的。只需放在divs的容器上即可。完成后,您可以按flex-direction
行/列更改div的位置。同样,一旦大小减小,就将第二个div放置在第一个div上方,可以为特定屏幕设置媒体查询,在该屏幕上可以反转列并完成操作。
在html中创建第二个容器,它们自然会在彼此之间对齐