和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

回答

相关问题