响应CSS位置

Question

请帮助我https://jsfiddle.net/duonglam271/spdqL73a/ 我无法定位树和那些被捕获的树

＆＃13;

＆＃13;

.coral {
  float: left;
  padding-top: 2%;
}

.coral img {
  width: 80%;
}

.col-9 {
  width: 73%;
  display: inline-block;
}

.col-3 {
  width: 23%;
  display: inline-block;
  position: relative;
}

.col-2 {
  width: 16.66%;
  display: inline-block;
}

.skill-header {
  padding-top: 2%;
  text-align: center;
  font-size: 100%;
}

.skill-level {
  padding-left: 1%;
  font-size: 100%;
}

.crab {
  width: 70%;
  margin-top: 20%;
}

＆＃13;

<div class="container div-5">
  <div class="row">
    <div class="col-3 coral">
      <img src='https://i.imgur.com/y7ciVbe.png' />
    </div>
    <div class="col-9">
      <div class="col-12 skill-header">
        <h1>Skills</h1>
      </div>

      <div class="col-12 skill-level">
        <div class="col-2 ">
          <h2>Beginner</h2>
        </div>
        <div class="col-2 ">
          <h2>Familiar</h2>
        </div>
        <div class="col-2 ">
          <h2>Intermediate</h2>
        </div>
        <div class="col-2 ">
          <h2>Professional</h2>
        </div>

      </div>
      <div class="col-2 ">
        <img class="crab" src='https://i.imgur.com/UghhNt0.png' />
      </div>
      <div class="col-2 ">
        <img class="crab" src='https://i.imgur.com/UghhNt0.png' />
      </div>
      <div class="col-2 ">
        <img class="crab" src='https://i.imgur.com/UghhNt0.png' />
      </div>

    </div>

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

示例

Answer 1

我看一下这个问题，你使用错误的网格系统测量，因为它适用于12个网格

对于4列，因为它需要被分成col-3，每个总共为12。您正在使用col-2，它总共为8，它在空间中留下col-4并导致布局问题，除非您需要放置水平对齐。

所以我建议你看一下网格布局，它会帮助你理解

建议我编写并在我身边工作的代码

 <div class="col-12 skill-level">
                <div class="col-3">
                    <h2>Beginner</h2>
                </div>
                <div class="col-3 ">
                    <h2>Familiar</h2>
                </div>
                <div class="col-3 ">
                    <h2>Intermediate</h2>
                </div>
                <div class="col-3 ">
                    <h2>Professional</h2>
                </div>

            </div>

请查看https://v4-alpha.getbootstrap.com/layout/grid/

享受代码的乐趣

Answer 2

您可以使用媒体查询。我将自定义字体大小添加到h2。

＆＃13;

＆＃13;

h2 {
  font-size:16px;
}
.coral {
  float: left;
  padding-top: 2%;
}

.coral img {
  width: 80%;
}

.col-9 {
  width: 73%;
  display: inline-block;
}

.col-3 {
  width: 23%;
  display: inline-block;
  position: relative;
}

.col-2 {
  width: 16.66%;
  display: inline-block;
}

.skill-header {
  padding-top: 2%;
  text-align: center;
  font-size: 100%;
}

.skill-level {
  padding-left: 1%;
  font-size: 100%;
}

.crab {
  width: 70%;
  margin-top: 20%;
}

@media only screen and (max-width: 768px){
  h2 {
    font-size:11px;
  }
}
@media only screen and (max-width: 768px){
  h2 {
    font-size:9
  }
}

＆＃13;

<div class="container div-5">
  <div class="row">
    <div class="col-3 coral">
      <img src='https://i.imgur.com/y7ciVbe.png' />
    </div>
    <div class="col-9">
      <div class="col-12 skill-header">
        <h1>Skills</h1>
      </div>

      <div class="col-12 skill-level">
        <div class="col-2 ">
          <h2>Beginner</h2>
        </div>
        <div class="col-2 ">
          <h2>Familiar</h2>
        </div>
        <div class="col-2 ">
          <h2>Intermediate</h2>
        </div>
        <div class="col-2 ">
          <h2>Professional</h2>
        </div>

      </div>
      <div class="col-2 ">
        <img class="crab" src='https://i.imgur.com/UghhNt0.png' />
      </div>
      <div class="col-2 ">
        <img class="crab" src='https://i.imgur.com/UghhNt0.png' />
      </div>
      <div class="col-2 ">
        <img class="crab" src='https://i.imgur.com/UghhNt0.png' />
      </div>

    </div>

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;