我有个问题 。我想知道将 div 放置在另一个 div 旁边的方法是什么。但是,如果您更改屏幕的宽度,其中一个 div 将位于另一个下方,并且可以适应屏幕的宽度。
.contenido {
display: flex;
flex-direction: row;
background-color: #e9e9e9;
height: 100%;
max-width:800px;
background-color: #fff;
color: #FDFFFF;
}
#inner {
margin: 1px;
width: 100%;
background: black;
border-radius: 5px;
padding: 40px;
display: inline;
color: #FDFFFF;
justify-content: center;
margin: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media screen and (max-width: 480px) {
#inner {
width: calc(100%);
}
}
</style>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<div class="contenido">
<div id="inner">div 1</div>
<div id="inner">div 2</div>
</div>
我正在寻找的是
div 内部
彼此相邻,但即使减小屏幕宽度,其中一个也位于另一个下方
在这里,我有一个答案(稍微修改了您的 css 代码)以使其工作:
然后我将解释一下发生了什么变化......
如您所见,我说:
display flex,是一个css,俗称或公认的:“Flexbox”,这个用在css中所谓的“盒子定位”,在需要制作响应式设计页面(即适应移动设备)。
在我们的例子中,为了确定我们应该把:
和其他属性,知道哪个是“子”元素的“父”容器就足够了,我们想要“居中”,垂直,水平或两者,或者如果我们想把它们放在旁边其他,这将取决于用户。
在我们的例子中,我们的子元素的父容器,它会是什么?,很简单,是 .content,它是在层次上最接近其子元素的容器。
所以我们已经知道我们应该在这个里面放什么:
还有他的其他属性……
有许多不同的方式来居中和对齐 flexbox,要查看其中一些位置和分布元素的方式,我建议您查看以下链接:
弹性盒
好吧,继续解释,不用多说,您可能已经注意到(如果您访问了 flexbox 链接),您可能已经注意到:
它所做的是将所有内容水平对齐到中心,它不会留下空格,因此如果要在每个元素之间放置空格,则必须使用另一种分布 justify-content: center; 或者,只需为所有具有 id #inner 的元素添加边距,最后一个除外。
这里的这个和上一个做的一样,但是不同的是它是垂直对齐而不是水平对齐,两者结合的结果是所有子元素都会水平和垂直对齐。
flex-flow,其实是两个可以分别定义的属性的缩写,就像“这些的组合”,分开,这两个是:
加入他们将是:
第一个参数“row”定义了对象在该容器中的分布方式以及它们如何对齐,在这种情况下,“row”是英文中的一行,因此它的分布将是一行,并且换行定义了元素是否不适合父容器,这将做的是将其他 div 向下移动。
当然row和wrap并不是唯一可以取的值,还有很多,其中有:row wrap、row no-wrap、row reverse等。
最后:
在内部,有必要添加:
因为从我一直在使用 flex-box 的过程中,我了解到如果你想很好地对齐你的内容,你应该使用 inline-block,因为 inline 禁用了 flex-box,inline-block 允许 flex-box 做你需要的事情它要做,并阻止问题是 div 的大小将等于其父容器的大小,因此由于没有空间,它们将始终在另一个下方对齐(这不是你想要的) .
顺便说一句,我看到您的默认 div 有 display: block,因此有必要添加该行,如果您的容器默认为 display: inline-block,我们可以跳过 put: display: inline-block in #内。
Flex grow 确定一个元素是否可以跨越元素的整个宽度,即“可以增长”,设置 0 表示它不能继承此行为,设置 1 表示可以。
尝试将 flex-grow: 1, in .content
希望我的回答对你有所帮助!祝你好运!
后记:正如已经回答问题的人所说:是的,确实最好将一个类放到#inner,并使用类而不是CSS中的id,因为正如他所说,你在几个中使用css元素,不仅是一个,而且 id,它应该对每个元素都是唯一的!,因为有类 :)
那么以下发生在我身上
更正属性的应用
id
它们是唯一元素,因此将
id
它们应用于多个元素被认为是错误的,因此您的代码应该使用class
将标识符应用于多个元素。应用
CSS GRID
你可以在CSS Grid的帮助下创建一个网格,这样你就可以构建你正在寻找的东西
澄清
display: grid;
在块级别生成网格或网格grid-template-columns
生成我们将获得的列数,使用1fr
2 次获得 2 列让它响应
最后让它响应应用这样的媒体查询
div
低于另一个,我们再次应用,grid-template-columns
但这次我们分配1fr
它将生成单个列的值最后的所有代码应该是这样的
检查工作示例
我能想到的最简单的事情,不使用媒体查询或网格。当视口小于 400 像素时(实际上要多一点,因为边距和其他),两个框将以 100% 的宽度放置在另一个下方。请注意,ID 不用于分配类,这是不好的做法,更不用说重复它们了。