[调整页面大小时,Div进入第一格

问题描述 投票:-1回答:2

我有这样的东西:

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:

CSS:body {margin:0; ...
javascript jquery html css
2个回答
0
投票

您可以使用flex blox实现此目的。只需放在divs的容器上即可。完成后,您可以按flex-direction行/列更改div的位置。同样,一旦大小减小,就将第二个div放置在第一个div上方,可以为特定屏幕设置媒体查询,在该屏幕上可以反转列并完成操作。


0
投票

在html中创建第二个容器,它们自然会在彼此之间对齐

© www.soinside.com 2019 - 2024. All rights reserved.