私のHTMLは次のようである：カスタムH3のポジショニングとP
<div>
<h3>Title</h3>
<p>Content</p>
<h3>Title</h3>
<p>Content</p>
<h3>Title</h3>
<p>Content</p>
</div>
問題Nrを。 1 HTMLを変更できません。 私はpがBoxed（問題ありません）ですが、私は彼らが一列に並んでいたいと思っています。 display: flex;は私の選択でした。 フレックスを使用するとh3とpが隣り合っています。 しかし、h3がpを超えています。
所望の出力例：
h3_________h3_________h3
p__________p__________p
が、私はそれらをどのように揃えることができますか？
私の母国語が英語でない
使用するために申し訳ありませんが、この：
.item {
display: inline-block;
width: 33%;
}<div class="item">
<h3>Title</h3>
<p>content</p>
</div>
<div class="item">
<h3>Title</h3>
<p>content</p>
</div>
<div class="item">
<h3>Title</h3>
<p>content</p>
</div>をフレックス理解たくさん手伝ってくれた:)あなたのすべてにスニペットの –
@Max Lang htmlを変更できない場合、唯一の方法はjs DOMを使用することです。 – SAM
よくok :)これをスキップすることができると思った... xD thxはたくさんの皆さんに:) –
.test{ flex-flow: row wrap;display: flex; }
.test h3,.test p { width: 33.333%;}
.test h3 {order: 1;}
.test p {order: 2;}<div class="test">
<h3>Title1</h3>
<p>content1</p>
<h3>Title2</h3>
<p>content2</p>
<h3>Title3</h3>
<p>content3</p>
</div>私は何を望みません。内容1,2,3はタイトルの下にある1,2,3 –
@ Max Langは今それをチックする。 – Dhaarani
私はこれを持っています。私はこれを知っている。しかし、私が欲しいのは、タイトル1のコンテンツ1がお互いのすぐ下にあり、その隣に次のようなものがあります。 –
試みあなたがHTMLを変更カント以来フレキシボックスで、33％の幅を設定することは問題ではありません。
div {
flex-flow: row wrap;
display: flex;
}
div > h3,
div > p {
width: 33.333%;
}
div > h3 {
order: 1;
}
div > p {
order: 2;
}<div>
<h3>Title1</h3>
<p>Content1</p>
<h3>Title2</h3>
<p>Content2</p>
<h3>Title3</h3>
<p>Content3</p>
</div>あなたは大歓迎です！感謝の意を表します:) – AlexG
新しい外部のdivと設定プロパティを作成します。
display: flex;
flex-direction: column;
私の例：mutchよう
.box {
display: flex;
flex-direction: column;
}<div class="box">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
</div>
は、私が言ったように:)良くなっ – Dhaarani
おかげで作業のデモを追加します私はHTMLを変更することはできませんので、1つのDivにすべてのコンテンツが含まれています –