CSS：使用display：flex定位元素的麻烦

debugcn 发表于 Dev

乔里斯

我在带有display：flex的div中有一个h1和一个p。两者并排放置，但它们必须位于彼此下方。它与（div）jkpage中具有类jktitre和类jktxt的元素有关。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;
}

m4n0

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

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。