Question

我的HTML是这样的：

<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

如何对齐它们？

抱歉我的英语不是我的母语

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

Answer 2

使用此：

＆＃13;

.item {
  display: inline-block;
  width: 33%;
}

＆＃13;

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

＆＃13;

Answer 3

＆＃13;

.test{ flex-flow: row wrap;display: flex; }
.test h3,.test p { width: 33.333%;}
.test h3 {order: 1;}
.test p {order: 2;}

＆＃13;

<div class="test">
  <h3>Title1</h3>
  <p>content1</p>
  <h3>Title2</h3>
  <p>content2</p>
  <h3>Title3</h3>
  <p>content3</p>  
</div>

＆＃13;

Answer 4

创建新的外部div并设置属性。

display: flex;
flex-direction: column;

我的例子：

＆＃13;

.box {
  display: flex;
  flex-direction: column;
}

＆＃13;

<div class="box">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
</div>

＆＃13;

H3和P的自定义定位

4 个答案: