试图让div在父div中保持对齐

时间：2017-10-24 09:10:43

标签： html css

出于某种原因，product-preview在product-container和product-preview-picture包含product-preview-text时，不希望在.product-container { display: block; background-color: white; margin-top: 100px; width: 1200px; height: 2500px; margin-left: auto; margin-right: auto; text-align: center; border: solid #232323 3px; position: relative; } .product-preview { display: inline-block; background-color: white; border: black solid 3px; width: 200px; height: 250px; margin: 20px; text-align: center; } .product-preview-picture { width: 180px; height: 150px; } .product-preview-text { margin: auto; width: 180px; height: 50px; }内保持垂直对齐。

在仔细查看文本后，我无法弄清楚导致它的原因。

＆＃13;
＆＃13; 
<div class="product-container">
  <div class="product-preview">
    <img class="product-preview-picture" src="http://miniimg8.rightinthebox.com/images/384x384/201210/pldeyv1350894557095.jpg" alt="TRASIG BILD">
    <p class="product-preview-text">Best chewing gum ever!</p>
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>
</div>
＆＃13; 
    <table style="width: 100%; border: 1px solid #dddddd">
                    <tr style="border-bottom: 1px solid #dddddd">
                                    <th class="col-md-3 left">Partition / Owner</th>
                                    <th class="col-md-3 left">Topic</th>
                                    <th class="col-md-3 left">Consumer</th>
                                    <th class="col-md-2 left">Remaining</th>
                                    <th class="col-md-1 center">Last Updated</th>
                                    <th class="col-md-1 center">Monitor</th>
                    </tr>

                    <tr ng-repeat="coffset in t.offsets | orderBy:'partition'">
                                    <td class="left" title="{{ fixThreadName(t.consumerId, t.threadId) }}">
                                                    {{ coffset.partition }}
                                                    <span ng-show="getConsumerHost(consumer, coffset)" class="small">
                                                                    : {{ getConsumerHost(consumer, coffset) }}
                                                                    (<span class="kafkaProtocolVersion">{{ getConsumerVersion(consumer, coffset) }}</span>)
                                                    </span>
                                                    <span ng-hide="getConsumerHost(consumer, coffset)" class="small null">
                                                                    : Consumer information unavailable
                                                    </span>
                                    </td>
                                    <td class="left">
                                                    {{ coffset.topicEndOffset }}
                                                    <span class="delta_topic small" ng-show="getTopicPartitionDelta(t.topic, coffset.partition)">
                                                                    <img src="/assets/images/tabs/inspect/arrow_topic.gif"> {{ getTopicPartitionDelta(t.topic, coffset.partition) | number }}
                                                    </span>
                                    </td>
                                    <td class="left">
                                                    <a ng-click="switchToMessage(coffset.topic, coffset.partition, coffset.offset)">{{ coffset.offset || 0 }}</a>
                                                    <span class="delta_topic small" ng-show="coffset.deltaC">
                                                                    <img src="/assets/images/tabs/inspect/arrow_topic.gif"> {{ coffset.deltaC | number }}
                                                    </span>
                                    </td>
                                    <td class="left">
                                                    {{ getMessagesLeft(coffset) | number }}
                                                    <span class="delta_consumer small" ng-show="coffset.deltaC">
                                                                    <img src="/assets/images/tabs/inspect/arrow_consumer.gif"> {{ coffset.deltaC | number }}
                                                    </span>
                                    </td>
                                    <td class="center small">
                                                    <span ng-show="coffset.lastModifiedTime">{{ coffset.lastModifiedTime | duration }}</span>
                                                    <span ng-hide="coffset.lastModifiedTime" class="null">N/A</span>
                                    </td>
                                    <td class="center small">
                                                    <a target="_blank" href="http://192.168.1.12:9020/#/group/{{consumer.consumerId}}/{{ t.topic }}">click</a>
                                    </td>
                    </tr>
                    <tr>
                                    <td colspan="6" style="height:400px;overflow:hidden" consumer="{{consumer.consumerId}}" topic="{{t.topic}}">
                                                    <iframe class="graphiframe" src="http://192.168.1.12:9020/graph.html#/group/{{consumer.consumerId}}/{{t.topic}}" frameborder="0" style="overflow:hidden" height="100%" width="100%">Loading...</iframe>
                                    </td>
                    </tr>
    </table>
＆＃13;
＆＃13;
＆＃13;

5 个答案:

答案 0 :(得分：0)

将vertical-align: middle;添加到您的项目中。

.product-container {
  display: block;
  background-color: white;
  margin-top: 100px;
  width: 1200px;
  height: 2500px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border: solid #232323 3px;
  position: relative;
}

.product-preview {
  display: inline-block;
  background-color: white;
  border: black solid 3px;
  width: 200px;
  height: 250px;
  margin: 20px;
  text-align: center;
  
  vertical-align: middle;
}

.product-preview-picture {
  width: 180px;
  height: 150px;
}

.product-preview-text {
  margin: auto;
  width: 180px;
  height: 50px;
}
<!-- product display container -->

<div class="product-container">
  <div class="product-preview">
    <img class="product-preview-picture" src="http://miniimg8.rightinthebox.com/images/384x384/201210/pldeyv1350894557095.jpg" alt="TRASIG BILD">
    <p class="product-preview-text">Best chewing gum ever!</p>
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>
</div>

答案 1 :(得分：0)

您可以 Grid grid = ...; // Passed in while initializing // Compiling cell values List visibleColumns = new ArrayList(); List columns = table.getColumns(); for(Iterator iterator = columns.iterator(); iterator.hasNext();) { Column column = iterator.next(); if (!column.isHidden()) { visibleColumns.add(column); } } // The Grid gets a Collection set as items, so I assume the rows should be ListDataProvider ListDataProvider listContainer = (ListDataProvider)grid.getDataProvider(); Collection items = listContainer.getItems(); for (/* Now I should be able to get the stored values in each row, but I assume I need the data types ... */) { for (Column column : visibleColumns) { String propertyId = column.getId(); // Could be null if no ID is given /* At least here I'd like to have access to the cell value */ } } 使用vertical-align来维持其对齐

.product-preview
.product-container {
  display: block;
  background-color: white;
  margin-top: 100px;
  width: 1200px;
  height: 2500px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border: solid #232323 3px;
  position: relative;
}

.product-preview {
  display: inline-block;
  background-color: white;
  border: black solid 3px;
  width: 200px;
  height: 250px;
  margin: 20px;
  text-align: center;
  vertical-align: top;
}

.product-preview-picture {
  width: 180px;
  height: 150px;
}

.product-preview-text {
  margin: auto;
  width: 180px;
  height: 50px;
}

答案 2 :(得分：0)

在vertical-align: top预览选择器

上添加.product-preview

＆＃13;
＆＃13; 
.product-container {
  display: block;
  background-color: white;
  margin-top: 100px;
  width: 1200px;
  height: 2500px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border: solid #232323 3px;
  position: relative;
}

.product-preview {
  display: inline-block;
  vertical-align: top;
  background-color: white;
  border: black solid 3px;
  width: 200px;
  height: 250px;
  margin: 20px;
  text-align: center;
}

.product-preview-picture {
  width: 180px;
  height: 150px;
}

.product-preview-text {
  margin: auto;
  width: 180px;
  height: 50px;
}
＆＃13; 
<div class="product-container">
  <div class="product-preview">
    <img class="product-preview-picture" src="http://miniimg8.rightinthebox.com/images/384x384/201210/pldeyv1350894557095.jpg" alt="TRASIG BILD">
    <p class="product-preview-text">Best chewing gum ever!</p>
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

试试这个

.product-preview {
   vertical-align: middle;
}

答案 4 :(得分：0)

.product-review的转移是由p标记引起的。

尝试将p标记放在图像之前。

它会移动父div，因此p标记位于下一行div末尾的一行上。

很遗憾，我无法在互联网上找到有关p标记行为的任何信息。

但您可以通过将overflow: auto or hidden添加到父级（.product-review）来中和它。如果您能找到一些解释，请分享。

.product-preview { overflow: auto; }
相关问题
最新问题