Question

我不确定是什么导致我的DIV对齐问题。我试图让两个2列DIV在中间对齐，但每个容器DIV似乎都没有应用对齐属性。看起来每个DIV容器只对齐左侧。

.twoColumnV2 {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
  -webkit-column-width: auto;
  -moz-column-width: auto;
  column-width: auto;
}
.twoColumn {
  -webkit-column-count: 2;
  /* Chrome, Safari, Opera */
  -moz-column-count: 2;
  /* Firefox */
  column-count: 2;
  -webkit-column-gap: 20px;
  /* Chrome, Safari, Opera */
  -moz-column-gap: 20px;
  /* Firefox */
  column-gap: 20px;
  -webkit-column-width: 50%;
  /* Chrome, Safari, Opera */
  -moz-column-width: 50%;
  /* Firefox */
  column-width: 50%;
}
.inlineBlock {
  display: inline-block;
  cursor: pointer;
}

<div style="text-align:center">
  <h1 class="inlineBlock" style="margin-top:-5px">Test Format</h1>
</div>
<div class="twoColumn">
  <div style="text-align: right">
    <!-- DIV container 01 -->
    <div class="twoColumnV2 inlineBlock">
      <div style="text-align: right" class="fieldName inlineBlock">Commodity:</div>
      <div style="text-align: left" class="inlineBlock">
        <select name="fkTest">
          <option value="">Please select</option>
          <option value="1">Avocados</option>
          <option value="2">Beans</option>
          <option value="3">Berries</option>
          <option value="4">Broccoli</option>
        </select>
      </div>
    </div>
  </div>
  <div style="text-align: left">
    <!-- DIV container 02 -->
    <div class="twoColumnV2 inlineBlock">
      <div style="text-align:right" class="fieldName inlineBlock">Variety:</div>
      <div style="text-align:left" class="inlineBlock">
        <select name="fkLocTest" id="fkLocTest">
          <option value="">Please select</option>
          <option value="12">Beefsteak</option>
          <option value="11">Cherry</option>
          <option value="13">Cherry on the Vine Organic</option>
          <option value="14">Cluster</option>
          <option value="10">Grape</option>
          <option value="9">Roma</option>
        </select>
      </div>
    </div>
  </div>
</div>

jsfiddle example

Answer 1

尝试使用div：twoColumn

margin-left: 20%;
margin-right: 20%;

Answer 2

请试试这个：

<!doctype html>
<html>
    <head>
        <style>
.twoColumnV2 {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        -webkit-column-gap: 20px;
        -moz-column-gap: 20px;
        column-gap: 20px;
        -webkit-column-width: auto;
        -moz-column-width: auto;
        column-width: auto;
    }

    .twoColumn {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
        -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
        -moz-column-gap: 20px; /* Firefox */
        column-gap: 20px;
        -webkit-column-width: 50%; /* Chrome, Safari, Opera */
        -moz-column-width: 50%; /* Firefox */
        column-width: 50%;
    }
    .float_left{float:left}
    .center{margin:0 auto; width:1170px;text-align:center}
    .flex{display:inline-flex;margin-right:50px}

</style>
      </head>

    <body>
    <div style="text-align:center"><h1 class="inlineBlock" style="margin-top:-5px">Test Format</h1></div>



    <div class="center">

    <div class="left_column flex">
     <div  class="fieldName">Commodity:</div>
                <div  class="inlineBlock">
                <select name="fkTest">
                    <option value="">Select Commodity:</option>
                    <option value="1">Avocados</option>
                    <option value="2">Beans</option>
                    <option value="3">Berries</option>
                    <option value="4">Broccoli</option>
                </select>
                </div>
                </div>







    <div class="right_column flex">

    <div  class="fieldName">Variety:</div>
                <div  class="inlineBlock">
                    <select name="fkLocTest" id="fkLocTest">
                        <option value="">Select Variety:</option>
                        <option value="12">Beefsteak</option>
                        <option value="11">Cherry</option>
                        <option value="13">Cherry on the Vine Organic</option>
                        <option value="14">Cluster</option>
                        <option value="10">Grape</option>
                        <option value="9">Roma</option>
                    </select>
                </div>
                 </div>


    </div>
    </div>


    </body>
</html>

Answer 3

如果我理解了这个问题，这个解决方案：

.inlineBlock {
    display:inline-block;
    cursor: pointer;
}

而不仅仅是这个：

.inlineBlock {
    display:inline;
    cursor: pointer;
}

Answer 4

我发现使用多个列DIV，所有列的宽度都相同。多列DIV不允许每列具有单独的宽度。解决方案是更改布局，而不是使用这么多的多列DIV。

DIV没有应用对齐

4 个答案: