Question

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

这就是我要实现的目标

外观如下：

我试图通过使用float属性使所有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>

Answer 1

您还应该为您的问题提供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，以确保它们的大小始终相同。

Answer 2

谢谢大家。经过如此多的尝试，我得以解决。在主div（容器）中，我使用了white-space:normal。

这是容器的css

.payment_box{
    word-wrap: break-word; 
     white-space: normal;
    min-width: 100%;
    max-width: 100%;
    overflow: hidden;
}

DIV对齐不正确

2 个答案: