和H3的自定義定位P

我的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是盒裝的（沒問題），但比我想要的是他們連續。 display: flex;是我的選擇。當我使用flex h3和p是彼此相鄰。但我希望h3高於p。

所需的輸出例如：

h3_________h3_________h3 
p__________p__________p

我該如何調整呢？

對不起，我的英語不是我的母語

來源

2016-09-28 Max Lang

添加摘錄工作演示 – Dhaarani

感謝這麼mutch你們所有的人:)幫了我很多理解柔性更好的現在:) –

使用本：

.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>

來源

2016-09-28 11:40:53 SAM

正如我所說的我無法更改HTML，因此只有一個Div包含所有內容 –

@Max Lang如果您無法更改html，唯一的方法是使用js DOM。 – SAM

好，好吧:)我以爲我可以跳過這個... 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>

來源

2016-09-28 11:41:43 Dhaarani

沒有多數民衆贊成在我不想要的。內容1,2,3 shuld下標題1,2,3 –

@最大郎現在chek它。 – Dhaarani

嗯，我有這個。我知道這個。但我想要的是，標題1內容1是正確的下方和他們旁邊 –

嘗試與Flexbox的，因爲你不能改變的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>

來源

2016-09-28 11:58:52 AlexG

不客氣！隨時接受這個答案:) – AlexG

創建新的外部DIV和設置屬性。

display: flex; 
flex-direction: column;

我的例子：

.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>

來源

2016-09-28 12:02:11 winiardesign

和H3的自定義定位P

回答

相關問題