別のdiv内で3つのdivを垂直に配置する方法を理解しようとして苦労しています。1つのdivを左側に、もう1つを右側に、もう1つを中央に配置する必要があります。すべてを垂直に揃えるために、位置相対、上位50％、transformY（-50％）を使用しています。私がこれを試したとき、彼らはまだ上下にとどまっています
私はjsfiddleでこの例を作成しました：https：//jsfiddle.net/6jb4c5gz/8/
<section style="background-color: yellow">
<div class="aaa" style="background-color:red;"></div>
<div class="bbb" style="background-color:blue;"></div>
<div class="ccc" style="background-color:green;"></div>
</section>
css：
body {
padding: 0;
margin: 0;
}
header{
margin: 0 auto;
text-align: center;
}
div {
height: 30px;
width: 30px;
}
1 {
position: relative;
top: 50%;
transform: translateX(-50%);
}
誰かがこれを手伝ってくれる？
編集：私は本当に明確ではなかったと思います。3つのdivを同じ行に配置し、1つを左側、1つを中央、もう1つを右側に配置しますが、垂直方向に配置します。
次のように単純にする必要があります。
header{
width: 100%;
display: flex;
justify-content: space-between;
}
header > div {
height: 30px;
width: 30px;
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加