html - 如何在不同分辨率下沿着设备的宽度在同一条线上划分不同的 div？

Question

我有一个由多行组成的元素列表。每行由 3 个 div 组成:

第一个包含 Logo 。

第二个包含元素的标题、状态和日期。

第三个包含更多信息。

我想将3个div放在同一行，并考虑到不同设备分辨率的宽度到页面的显示中。 index.html:

结果我在一行中得到了 Logo ，在另一行中得到了另外两个 div。我该如何解决这个问题？

#list_project {
  position: relative;
  top: 120px;
  z-index: 1;
}

.project_logo {
  display: block;
  height: 60px;
}

.project_title {
  font-size: 18px;
  font-family: "Arial";
  color: #000000;
  font-weight: bold;
  line-height: 1.2;
}

.project_status {
  font-size: 18px;
  font-family: "Arial Round MT Bold";
  color: #8e8e8e;
  line-height: 1.2;
}

.project_date {
  font-size: 18px;
  font-family: "Arial";
  color: #8e8e8e;
  line-height: 1.2;
}

.project_info_1 {
  border-radius: 10px;
  background-color: #e6e1e1;
  height: 63px;
}

.project_cost {
  font-size: 16px;
  font-family: "Arial";
  color: #000000;
  font-weight: bold;
  line-height: 1.2;
}

.project_cost_1 {
  font-size: 16px;
  font-family: "Arial";
  color: #8e8e8e;
  font-weight: bold;
  line-height: 1.2;
}

<div id="list_project">
  <div class="container-fluid">
    <div class="row">
      <div class="col col-sm-4 col-md-4 col-lg-4 col-xl-4">
        <img class="project_logo" src="./logos/logo.png" />
      </div>
      <div class="col col-sm-4 col-md-4 col-lg-4 col-xl-4">
        <table>
          <tbody>
            <tr>
              <td class="project_title"> Project 1 </td>
            </tr>
            <tr>
              <td class="project_status">Active</td>
            </tr>
            <tr>
              <td class="project_date">03/2017-05/2018</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="col col-sm-4 col-md-4 col-lg-4 col-xl-4">
        <table class="project_info_1">
          <tbody>
            <tr>
              <td class="project_cost" name="project_cost">Cost:</td>
              <td class="project_cost_1" name="project_cost_1">140.000k$.</td>
            </tr>
            <tr>
              <td class="project_cost" name="project_delay">Delay:</td>
              <td class="project_cost_1" name="project_delay_1">350 days.</td>
            </tr>
            <tr>
              <td class="project_cost" name="project_load">Load:</td>
              <td class="project_cost_1" name="project_load_1">125 days.</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Answer 1

好的，首先它不会工作，因为你有 clas="..." 而不是 class=".."。所以仅靠这一点是行不通的

最后，不需要作为指南 "col col-sm-4 col-md-4 col-lg-4 col-xl-4"。 您只能使用 "col col-sm-4 col-md-4" 因为任何更大的分辨率都将使用最后找到的“最高跨度”，如果您知道我的意思，在您的情况下是 col-md-4 如果您进行更改，则 col-md-4 对于 lg、xl、xxl 也将为 4。

如果要有不同的跨度大小，您只需添加 col-lg 等