Question

我在 div 中有 h1 和 p display：flex 。两者并排放置，但它们必须在彼此之下。它是关于类jktitre和类jktxt里面（div）jkpage的元素。 jkpage div与jksidebar（并排）一起弯曲

我没想到文本元素会以某种方式继承flex属性。或类似的东西。

<div class="container">
    <div class="jkheader"></div>
    <div class="jknavbar"></div>
    <div class="jkrow">
        <div class="jkpage">
            <h1 class="jktitre">BLABLABLA</h1>
            <p class="jktxt">jeoipfjn ehuwfojv ebowuinlj;hnjveohjej</p>
        </div>
        <div class="jksidebar"></div>
    </div>
    <div class="jkfooter"></div>
</div>

CSS：

  body{
    background-color: lightgrey;
}

.jktitre{
    margin-left:5%;
    float:left;
    display: block;
}

.jktxt{
    margin-left:5%;
    padding:10px;
    float:left;

}

.jkrow{
    width:100%;
    display:flex;
}

.jkheader{
    margin-top:20px;
    height:150px;
    width:100%;
    background-color: #2d18a4;
}

.jknavbar{
    height:45px;
    width:100%;
    background-color: black;
}

.jkpage{
    height:400px;
    width:75%;
    background-color: #e7e7e7;
    display:flex;
}

.jksidebar{
    height:400px;
    width:25%;
    background-color: darkslategrey;
    display:flex;
}

.jkfooter{
    height:150px;
    width:100%;
    background-color: blue;
    margin-bottom: 20px;
}

Answer 1

将flex-direction: column添加到父元素以在彼此之下显示它们。它的默认值是row，它从左到右（并排）显示子元素

＆＃13;

body {
  background-color: lightgrey;
}
.jktitre {
  margin-left: 5%;
  float: left;
  display: block;
}
.jktxt {
  margin-left: 5%;
  padding: 10px;
  float: left;
}
.jkrow {
  width: 100%;
  display: flex;
}
.jkheader {
  margin-top: 20px;
  height: 150px;
  width: 100%;
  background-color: #2d18a4;
}
.jknavbar {
  height: 45px;
  width: 100%;
  background-color: black;
}
.jkpage {
  height: 400px;
  width: 75%;
  background-color: #e7e7e7;
  display: flex;
  flex-direction: column;
}
.jksidebar {
  height: 400px;
  width: 25%;
  background-color: darkslategrey;
  display: flex;
}
.jkfooter {
  height: 150px;
  width: 100%;
  background-color: blue;
  margin-bottom: 20px;
}

＆＃13;

<div class="container">
  <div class="jkheader"></div>
  <div class="jknavbar"></div>
  <div class="jkrow">
    <div class="jkpage">
      <h1 class="jktitre">BLABLABLA</h1>
      <p class="jktxt">jeoipfjn ehuwfojv ebowuinlj;hnjveohjej</p>
    </div>
    <div class="jksidebar"></div>
  </div>
  <div class="jkfooter"></div>
</div>

＆＃13;

css：使用display：flex来定位元素

1 个答案: