将两个div对齐在一行但它们不在同一个元素中？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了将两个div对齐在一行但它们不在同一个元素中？相关的知识，希望对你有一定的参考价值。
我在这里写一个例子：https://jsfiddle.net/1631pndx/2/
这两个元素属于两个不同的div。但我想在一行中展示它们。而不是改变其他元素。没有javascript，只需通过CSS，如何做到这一点？
.container_1,
.container_2,
.container_3 {
min-width: 200px;
min-height: 200px;
border: solid 2px lightblue;
margin: 10px;
}
.container_2 {
border: solid 2px gray;
}
.container_3 {
border: solid 2px chocolate;
}<div class="container_1">
<h3> 1st element </h3>
</div>
<div class="container_2">
<p> some other elements</p>
<div class="container_3">
<p> some other elements</p>
<h3>2nd element</h3>
<h4>[The 1st element should in here]</h4>
</div>
</div>答案
如果每个元素的内容是动态的，那将是非常困难的（可能是不可能的），并且容易出错。
在您概述的情况下，内容相对固定。如果是这种情况，我们可以使用position: absolute与固定的top和left属性。像这样的东西：
.container_1,
.container_2,
.container_3 {
min-width: 200px;
min-height: 200px;
border: solid 2px lightblue;
margin: 10px;
}
.container_1 {
position: absolute;
top: 148px;
left: 32px;
width: calc(100% - 88px);
}
.container_2 {
border: solid 2px gray;
}
.container_3 {
border: solid 2px chocolate;
min-height: 310px;
}<div class="container_1">
<h3> 1st element </h3>
</div>
<div class="container_2">
<p> some other elements</p>
<div class="container_3">
<p> some other elements</p>
<h3>2nd element</h3>
</div>
</div>以上是关于将两个div对齐在一行但它们不在同一个元素中？的主要内容，如果未能解决你的问题，请参考以下文章