时间戳

首页 > 解决方案 > DIV 未正确对齐

html - DIV 未正确对齐

问题描述

如何正确并排对齐 3 个 div？

这就是我想要达到的目标 在此处输入图像描述

下面是外观：

在此处输入图像描述

我尝试使用左侧的浮动属性使所有 div 具有相同的宽度，但它没有帮助；我也使用inline-block了 float 属性，但这也无济于事。

.payment_box .row .col-md-4 {
  position: relative;
}

@media (min-width: 992px) {
  .payment_box .row .col-md-4 {
    float: left;
    display: inline-block;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
}
<fieldset id="wc-<?php echo esc_attr( $this->id ); ?>-cc-form" class="wc-credit-card-form wc-payment-form row">
  <?php do_action( 'woocommerce_credit_card_form_start', $this->id 
             ); ?>


  <?php if ( $this->inline_cc_form ) { ?>
  <label for="card-element">
    			<?php esc_html_e( 'Credit or debit card', 'woocommerce-
                gateway-stripe' ); ?>
    			</label>

  <div id="stripe-card-element" class="wc-stripe-elements-
               field">
    <!-- a Stripe Element will be inserted here. -->
  </div>
  <?php } else { ?>
  <div class="col-md-4 ">
    <!--<label for="stripe-card-element"><?php esc_html_e( 
               'Card Number', 'woocommerce-gateway-stripe' ); ?> 
    				<span class="required">*</span></label>-->
    <div class="stripe-card-group">
      <i class="stripe-credit-card-brand stripe-card-
                     brand" alt="Credit Card"></i>
      <div id="stripe-card-element" class="wc-stripe-
                       elements-field">
        <!-- a Stripe Element will be inserted here. -->
      </div>
    </div>

  </div>

  <div class="col-md-4">
    <!--<label for="stripe-exp-element"><?php esc_html_e( 
               'Expiry Date', 'woocommerce-gateway-stripe' ); ?> 
    				<span class="required">*</span></label>-->

    <div id="stripe-exp-element" class="wc-stripe-elements-
                    field">
      <!-- a Stripe Element will be inserted here. -->
    </div>
  </div>

  <div class="col-md-4">
    <!--<label for="stripe-cvc-element"><?php esc_html_e(  
                 'Card Code (CVC)', 'woocommerce-gateway-stripe' ); ?> 
    				<span class="required">*</span></label>-->
    <div id="stripe-cvc-element" class="wc-stripe-elements- 
                field">
      <!-- a Stripe Element will be inserted here. -->
    </div>
  </div>
  <div class="clear"></div>
  <?php } ?>

  <!-- Used to display form errors -->
  <div class="stripe-source-errors" role="alert"></div>
  <br />
  <?php do_action( 'woocommerce_credit_card_form_end', $this->id );           
            ?>
  <div class="clear"></div>
</fieldset>

标签： htmlcss

解决方案

您还应该为您的问题提供 HTMl，以便人们知道您在尝试什么。我将使用col 1,来提供我的答案col 2，col 3因此您可以了解它们的工作原理。

为您的列创建一个初始包装器，然后为它们创建一个 DIV 是一个好主意。

我在下面提供了一个使用三个列名的示例，以便您可以修改百分比和宽度以在移动设备上显示不同的数量。

.columnswrapper {
    min-width: 100%;
    max-width: 100%;
    overflow: hidden;
}

@media only screen and (max-width: 500px) {
.columnswrapper {
    min-width: 100%;
    max-width: 100%;
    overflow: hidden;
}
}

.columns {
    min-width: 100%;
    text-align: center;
}

.col1 {
    min-width: 33.3%;
    float: left;
}

@media only screen and (max-width: 500px) {
.col1 {
    min-width: 100%;
    float: left;
}
}

.col2 {
    min-width: 33.3%;
    float: left;
}

@media only screen and (max-width: 500px) {
.col1 {
    min-width: 100%;
    float: left;
}
}

.col3 {
    min-width: 33.3%;
    float: left;
}

@media only screen and (max-width: 500px) {
.col3 {
    min-width: 100%;
    float: left;
}
}
<div class="columnswraper">
<div class="columns">

<div class="col1">
<p>Content Goes Here</p>
</div>

<div class="col2">
<p>Content Goes Here</p>
</div>

<div class="col3">
<p>Content Goes Here</p>
</div>

</div>
</div>

如果您希望它们都具有相同的大小，则可以像这样修剪代码；

.columnswrapper {
    min-width: 100%;
    max-width: 100%;
    overflow: hidden;
}

@media only screen and (max-width: 500px) {
.columnswrapper {
    min-width: 100%;
    max-width: 100%;
    overflow: hidden;
}
}

.columns {
    min-width: 100%;
    text-align: center;
}

.col {
    min-width: 33.3%;
    float: left;
}

@media only screen and (max-width: 500px) {
.col {
    min-width: 100%;
    float: left;
}
}
<div class="columnswraper">
<div class="columns">

<div class="col">
<p>Content Goes Here</p>
</div>

<div class="col">
<p>Content Goes Here</p>
</div>

<div class="col">
<p>Content Goes Here</p>
</div>

</div>
</div>

或者说我们希望两列占 40%，一列占 80，但为了移动设备而堆叠它们，我们可以这样做；

.columnswrapper {
    min-width: 100%;
    max-width: 100%;
    overflow: hidden;
}

@media only screen and (max-width: 500px) {
.columnswrapper {
    min-width: 100%;
    max-width: 100%;
    overflow: hidden;
}
}

.columns {
    min-width: 100%;
    text-align: center;
}

.col1 {
    min-width: 40%;
    float: left;
}

@media only screen and (max-width: 500px) {
.col1 {
    min-width: 100%;
    float: left;
}
}

.col2 {
    min-width: 40%;
    float: left;
}

@media only screen and (max-width: 500px) {
.col1 {
    min-width: 100%;
    float: left;
}
}

.col3 {
    min-width: 20%;
    float: left;
}

@media only screen and (max-width: 500px) {
.col3 {
    min-width: 100%;
    float: left;
}
}
<div class="columnswraper">
<div class="columns">

<div class="col1">
<p>Content Goes Here</p>
</div>

<div class="col2">
<p>Content Goes Here</p>
</div>

<div class="col3">
<p>Content Goes Here</p>
</div>

</div>
</div>

保持100%您的宽度将确保一列在移动设备上变为一行。您还可以使用该float属性并将max-width列设置为与 相同，min-with以确保它们始终具有相同的大小。

推荐阅读