Question

我有一个由多行组成的项目列表。每行包含3个div：

第一个包含徽标。

第二个包含项目的标题，状态和日期。

第三个包含更多信息。

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

因此，我将徽标排成一行，将另外两个div放在另一行中。我该如何修复？

＆＃13;

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

＆＃13;

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

＆＃13;

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 col-lg public class MySwitchPreference extends SwitchPreference { private final Listener mListener = new Listener(); private class Listener implements CompoundButton.OnCheckedChangeListener { @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { if (!callChangeListener(isChecked)) { // Listener didn't like it, change it back. // CompoundButton will make sure we don't recurse. buttonView.setChecked(!isChecked); return; } MySwitchPreference.this.setChecked(isChecked); } } public MySwitchPreference(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { super(context, attrs, defStyleAttr, defStyleRes); } public MySwitchPreference(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } public MySwitchPreference(Context context, AttributeSet attrs) { super(context, attrs); } public MySwitchPreference(Context context) { super(context); } @Override protected void onBindView(View view) { super.onBindView(view); View checkableView = view.findViewById(R.id.switch_widget); if (checkableView != null && checkableView instanceof Checkable) { if (checkableView instanceof Switch) { final Switch switchView = (Switch) checkableView; switchView.setOnCheckedChangeListener(null); } ((Checkable) checkableView).setChecked(isChecked()); if (checkableView instanceof Switch) { final Switch switchView = (Switch) checkableView; switchView.setTextOn(getSwitchTextOn()); switchView.setTextOff(getSwitchTextOff()); switchView.setOnCheckedChangeListener(mListener); } } } }对于lg，xl，xxl也将是4。

如果要有不同的跨度大小，您只需添加android:id="@android:id/switch_widget"等等

Answer 2

<div class="row">

   <div class="col-md-6">
      //FIRST DIV HERE
   </div>
   <div class="col-md-6">
     //SECOND DIV HERE
   </div>

</div>

Answer 3

'Class'拼写错误。你使用'clas'代替“class”

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

3 个答案: