Question

So I have to make a set of checkboxes, of any number, arranged in columns. I can't seem to figure out how to do that without specifying a height so I used flexbox to make rows instead, but that won't work when there items with multiple lines of text. This will create vertical spacing which I don't want. Is there any clean suggestion to fix this? In the screengrab I show where I am at now, the spacing between each field vertically should be uniform.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="my context"
android:id="@+id/relativeLayout">

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    android:id="@+id/helloButton"/>

.

.filter-fields-container {
  display: flex;
  overflow-y: scroll;
  max-height: 350px;
  flex-wrap: wrap;
}

.filter-fields-container  > .field {
  flex: 1 0 33%;
}

Answer 1

您可以尝试column-fill：

＆＃13;

.container {
  -webkit-column-count:3;
     -moz-column-count:3;
          column-count:3;
  -webkit-column-fill:balance;
     -moz-column-fill:balance;
          column-fill:balance;
  width:100%;
}
.field {
  display:inline-block;
  width:100%;
}

/* extra ? */
input {
  float:left;
  }
span {
  display:block;
  overflow:hidden;
  }

＆＃13;

<div class="container">
  <div class="field">
    <label>
      <input class="input-checkbox" id="InputLorem" name="Inputs" type="checkbox" value="Lorem ipsum dolor sit amet" /> <span>Lorem ipsum dolor sit amet</span> </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputConsectetur" name="Inputs" type="checkbox" value="Consectetur adipisicing elit" /> <span>Consectetur adipisicing elit</span> </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputIpsa" name="Inputs" type="checkbox" value="Ipsa eligendi doloremque reiciendis laboriosam deleniti officia" /> <span>Ipsa eligendi doloremque reiciendis laboriosam deleniti officia</span> </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputAd" name="Inputs" type="checkbox" value="Ad natus optio" /> <span>Ad natus optio </span> </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputMaxime" name="Inputs" type="checkbox" value="Maxime ipsam quas culpa commodi" /> <span>Maxime ipsam quas culpa commodi</span> </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputAccusamus" name="Inputs" type="checkbox" value="Accusamus quam dolorum error" /> <span>Accusamus quam dolorum error</span> </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputNumquam" name="Inputs" type="checkbox" value="Numquam modi" /> <span>Numquam modi</span> </label>
  </div> <div class="field">
    <label>
      <input class="input-checkbox" id="InputLorem" name="Inputs" type="checkbox" value="Lorem ipsum dolor sit amet" /> <span>Lorem ipsum dolor sit amet</span> </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputConsectetur" name="Inputs" type="checkbox" value="Consectetur adipisicing elit" /> <span>Consectetur adipisicing elit</span> </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputIpsa" name="Inputs" type="checkbox" value="Ipsa eligendi doloremque reiciendis laboriosam deleniti officia" /> <span>Ipsa eligendi doloremque reiciendis laboriosam deleniti officia</span> </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputAd" name="Inputs" type="checkbox" value="Ad natus optio" /> <span>Ad natus optio </span> </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputMaxime" name="Inputs" type="checkbox" value="Maxime ipsam quas culpa commodi" /> <span>Maxime ipsam quas culpa commodi</span> </label>
  </div>
</div>

＆＃13;

结果是大多数时间平均输出所需的codepen to play with, (add/remove elements)

对于flex，你需要设置一个宽度并允许元素包裹，它将逐行填充，而不是逐列填充。

＆＃13;

.container {
  display: flex;
  flex-wrap: wrap;
}
.field {
  width: 33%;
}
/* extra ? */

input {
  float: left;
}
span {
  display: block;
  overflow: hidden;
}

＆＃13;

<div class="container">
  <div class="field">
    <label>
      <input class="input-checkbox" id="InputLorem" name="Inputs" type="checkbox" value="Lorem ipsum dolor sit amet" /> <span>Lorem ipsum dolor sit amet</span> 
    </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputConsectetur" name="Inputs" type="checkbox" value="Consectetur adipisicing elit" /> <span>Consectetur adipisicing elit</span> 
    </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputIpsa" name="Inputs" type="checkbox" value="Ipsa eligendi doloremque reiciendis laboriosam deleniti officia" /> <span>Ipsa eligendi doloremque reiciendis laboriosam deleniti officia</span> 
    </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputAd" name="Inputs" type="checkbox" value="Ad natus optio" /> <span>Ad natus optio </span> 
    </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputMaxime" name="Inputs" type="checkbox" value="Maxime ipsam quas culpa commodi" /> <span>Maxime ipsam quas culpa commodi</span> 
    </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputAccusamus" name="Inputs" type="checkbox" value="Accusamus quam dolorum error" /> <span>Accusamus quam dolorum error</span> 
    </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputNumquam" name="Inputs" type="checkbox" value="Numquam modi" /> <span>Numquam modi</span> 
    </label>
  </div>
  <div class="field">
    <label>
      <input class="input-checkbox" id="InputLorem" name="Inputs" type="checkbox" value="Lorem ipsum dolor sit amet" /> <span>Lorem ipsum dolor sit amet</span> 
    </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputConsectetur" name="Inputs" type="checkbox" value="Consectetur adipisicing elit" /> <span>Consectetur adipisicing elit</span> 
    </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputIpsa" name="Inputs" type="checkbox" value="Ipsa eligendi doloremque reiciendis laboriosam deleniti officia" /> <span>Ipsa eligendi doloremque reiciendis laboriosam deleniti officia</span> 
    </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputAd" name="Inputs" type="checkbox" value="Ad natus optio" /> <span>Ad natus optio </span> 
    </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputMaxime" name="Inputs" type="checkbox" value="Maxime ipsam quas culpa commodi" /> <span>Maxime ipsam quas culpa commodi</span> 
    </label>
  </div>
</div>

＆＃13;

Answer 2

select
    count(lt.Lead_transaction_id) as Total,
    coalesce(sum(lt.Rate), 0) as "Sum",
    sm.Status_Site as "Status"
from
    Status_Mapping sm
    left outer join
    (
        select lt.Lead_transaction_id, lt.Status, lt.Rate
        from
            Lead_transaction lt inner join Lead_instance li
                on li.Lead_transaction_id = lt.Lead_transaction_id
        where
            li.product_id = 6 and li.affiliate_id = 10
    ) lt
        on lt.Status = sm.Status_original
group by sm.Status_Site

Height is nedded. You classes or not the same in html as in css.

Styling columns of items without akward spacing between rows

2 个答案: