响应CSS位置

Question

请帮我拿这个https://jsfiddle.net/duonglam271/spdqL73a/，我无法定位树和被捕捞的人

​

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

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

​

示例

​

​

Answer 1

我看了一下，这个问题，你使用了错误的测量网格系统，因为它很好地工作在12个网格

对于4列，因为它需要被划分为col-3，每个列总共12列。除非你需要放置水平对齐，否则你使用的是总体在8中，左-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中添加了自定义字体大小。

​

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

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

​