Question

我刚刚开始学习CSS和HTML的基础知识，而且我很难理解为什么我的盒子不对齐。

为了给您一个简短的背景，每次我进入一个新的＆＃34;供应商＆＃34;在wordpress CMS中，它将显示在整个供应商页面上，如附图所示。但是，总会出现某种错位。任何人都可以帮我解决这个问题吗？

`

    <div class="row">
    <?php
        $args = array(
        'hide_empty' => 0,
        'order' => 'desc',
        'taxonomy' => 'vender',
        'orderby' => 'name',
        'order' => 'ASC',
        );

    ?>

    <?php 
        $vendors = get_categories( $args );
        foreach ( $vendors as $vendor ):   
        //print_r($vendor); 
        $image = get_field('image', 'vender_'.$vendor->term_id);
        $location = get_field('location', 'vender_'.$vendor->term_id);
        $cuisines = get_field('cuisines', 'vender_'.$vendor->term_id);
    ?>
        <div class="col-md-3 col-xs-12 col-sm-6">
            <div class="partner">
                <div class="image-partner">
                    <a href="<?php bloginfo('url');?>/access/viewmenu?vendor=<?php echo $vendor->slug;?>" target="_blank"><img class="img-responsive" src="<?php echo $image['url']; ?>" /></a>
                </div>
                <h3 class="name-partner"><?php echo $vendor->name;?></h3>
                <div class="desc-partner"><?php echo $vendor->description;?></div>
                <div class="loc-partner">Locations: <?php if (sizeof($location) >1) echo implode(",", $location); else echo $location[0];?></div>

             </div>
        </div>
      <?php endforeach; ?>


    </div>

    <!-------------- Class Studio ------------------->
    <div class="row">
    <?php
        $args = array(
        'hide_empty' => 0,
        'order' => 'desc',
        'taxonomy' => 'studios',
        'orderby' => 'name',
        'order' => 'ASC',
        );

    ?>

    <?php 
        $vendors = get_categories( $args );
        foreach ( $vendors as $vendor ):   
        //print_r($vendor); 
        $image = get_field('image', 'studios_'.$vendor->term_id);

    ?>
        <div class="col-md-3 col-xs-12 col-sm-6">
            <div class="partner">
                <div class="image-partner">
                    <img class="img-responsive" src="<?php echo $image['url']; ?>" />
                </div>
                <h3 class="name-partner"><?php echo $vendor->name;?></h3>
                <div class="desc-partner"><?php echo $vendor->description;?></div> 

             </div>
        </div>
      <?php endforeach; ?>


    </div>

</div>`

misalignment

misalignment 2

Answer 1

尝试使用nth-child可能会帮助你

.row .partner:nth-child(3n+1)
{
clear:both;
}

Answer 2

除非内部内容是可变的，否则给容器一个最大高度？

.selector{ max-height: 300px; }

css - 我的盒子没对齐

2 个答案: