Question

在我的网站主页（https://abbaproperty.000webhostapp.com/）上，我有三个内联div，如下所示：

但是当在略小的scree（不是移动设备）上观看时，它看起来像这样：

他们的身高不再相同。虽然我添加了一些响应式CSS，但在较小的移动设备上看起来确实如此。

所以我的问题是，有一个甜蜜的地方，这些div没有很好的响应性显示，我甚至不能想到逻辑CSS来解决这个问题。有人可以帮忙吗？提前谢谢！

HTML：

<div class="container" style="width:100%; background-color:#205ba0; padding:30px;">

    <div class="col-md-offset-3 col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
        <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;">
            <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/rent.png" style="height:100px;">
        </div>
        <h2 style="font-weight:bold;">Renting? Landlords welcome.</h2>
        A swift liason between landlords and tenants as a fair, independeant party, is just one of our services.<br><br>
        <a href="https://abbaproperty.000webhostapp.com/index.php/property-management/" style="color:white;">Find out more ></a>
    </div>

    <div class="col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
        <div class="trip" style="background-color:white; margin-bottom:15px;">
            <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/val.png" style="height:100px;">
        </div>
        <h2 style="font-weight:bold;">Valuation? Sorted quickly.</h2>
        Providing some of the most effecient valuations in town, we're here to help you sort out an important step.<br><br>
        <a href="https://abbaproperty.000webhostapp.com/index.php/valuations/" style="color:white;">Find out more ></a>
    </div>

    <div class="col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
        <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;">
            <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/sale.png" style="height:100px;">
        </div>
        <h2 style="font-weight:bold;">Selling? Now uncomplicated.</h2>
        We aim to make selling easy. Our trained estate agents are constantly available to help.<br><br>
        <a href="https://abbaproperty.000webhostapp.com/index.php/sell/" style="color:white;">Find out more ></a>
    </div>

</div>

Answer 1

只需将display: flex添加到.container（不 wrap）

Answer 2

将.container定义为flexbox并添加了CSS中定义的其他样式属性。

＆＃13;

.container {
display: flex;
justify-content: space-around;
align-items: stretch;
}

＆＃13;

<div class="container" style="width:100%; background-color:#205ba0; padding:30px;">

    <div class="col-md-offset-3 col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
        <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;">
            <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/rent.png" style="height:100px;">
        </div>
        <h2 style="font-weight:bold;">Renting? Landlords welcome.</h2>
        A swift liason between landlords and tenants as a fair, independeant party, is just one of our services.<br><br>
        <a href="https://abbaproperty.000webhostapp.com/index.php/property-management/" style="color:white;">Find out more ></a>
    </div>

    <div class="col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
        <div class="trip" style="background-color:white; margin-bottom:15px;">
            <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/val.png" style="height:100px;">
        </div>
        <h2 style="font-weight:bold;">Valuation? Sorted quickly.</h2>
        Providing some of the most effecient valuations in town, we're here to help you sort out an important step.<br><br>
        <a href="https://abbaproperty.000webhostapp.com/index.php/valuations/" style="color:white;">Find out more ></a>
    </div>

    <div class="col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
        <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;">
            <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/sale.png" style="height:100px;">
        </div>
        <h2 style="font-weight:bold;">Selling? Now uncomplicated.</h2>
        We aim to make selling easy. Our trained estate agents are constantly available to help.<br><br>
        <a href="https://abbaproperty.000webhostapp.com/index.php/sell/" style="color:white;">Find out more ></a>
    </div>

</div>

＆＃13;

Answer 3

你需要使用flexbox！

在容器上，添加另一个名为flexbox的类，并添加以下内容：

.flexbox {
    display: flex;
}

这是一个小提琴！

https://jsfiddle.net/d6xfu1yz/

Answer 4

您可以使用display:table和display:table-cell执行此操作。只有当你不能以任何其他方式做到时才使用flex。

* {
  box-sizing: border-box;
}
.table {
  display: block;
  table-layout:fixed;
}
.table-cell {
  display: block;
  width:100%;
}
@media screen and (min-width: 640px) {
  .table {
    display: table;
    table-layout:fixed;
  }
  .table-cell {
    display: table-cell;
    width:33.333%;
  }
}

<div class="container table" style="width:100%; background-color:#205ba0; padding:30px;">

    <div class="col-md-offset-3 col-md-2 table-cell" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
      <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;">
        <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/rent.png" style="height:100px;">
      </div>  
      <h2 style="font-weight:bold;">Renting? Landlords welcome.</h2>
      A swift liason between landlords and tenants as a fair, independeant party, is just one of our services.<br><br>
      <a href="https://abbaproperty.000webhostapp.com/index.php/property-management/" style="color:white;">Find out more ></a>
    </div>

    <div class="col-md-2 table-cell" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
      <div class="trip" style="background-color:white; margin-bottom:15px;">
        <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/val.png" style="height:100px;">
      </div>
      <h2 style="font-weight:bold;">Valuation? Sorted quickly.</h2>
    Providing some of the most effecient valuations in town, we're here to help you sort out an important step.<br><br>
      <a href="https://abbaproperty.000webhostapp.com/index.php/valuations/" style="color:white;">Find out more ></a>
    </div>

    <div class="col-md-2 table-cell" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
      <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;">
        <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/sale.png" style="height:100px;">
      </div>
      <h2 style="font-weight:bold;">Selling? Now uncomplicated.</h2>
      We aim to make selling easy. Our trained estate agents are constantly available to help.<br><br>
      <a href="https://abbaproperty.000webhostapp.com/index.php/sell/" style="color:white;">Find out more ></a>
    </div>

</div>

Answer 5

放

<div class='row'>

在容器类之后。它使div层响应同时在图像标签上放置class =“img-responsive”以使其响应

<div class="container" style="width:100%; background-color:#205ba0; padding:30px;">
<div class="row">
    <div class="col-md-offset-3 col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
        <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;">
            <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/rent.png" style="height:100px;">
        </div>
        <h2 style="font-weight:bold;">Renting? Landlords welcome.</h2>
        A swift liason between landlords and tenants as a fair, independeant party, is just one of our services.<br><br>
        <a href="https://abbaproperty.000webhostapp.com/index.php/property-management/" style="color:white;">Find out more ></a>
    </div>

    <div class="col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
        <div class="trip" style="background-color:white; margin-bottom:15px;">
            <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/val.png" style="height:100px;">
        </div>
        <h2 style="font-weight:bold;">Valuation? Sorted quickly.</h2>
        Providing some of the most effecient valuations in town, we're here to help you sort out an important step.<br><br>
        <a href="https://abbaproperty.000webhostapp.com/index.php/valuations/" style="color:white;">Find out more ></a>
    </div>

    <div class="col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
        <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;">
            <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/sale.png" style="height:100px;">
        </div>
        <h2 style="font-weight:bold;">Selling? Now uncomplicated.</h2>
        We aim to make selling easy. Our trained estate agents are constantly available to help.<br><br>
        <a href="https://abbaproperty.000webhostapp.com/index.php/sell/" style="color:white;">Find out more ></a>
    </div>
</row>
</div>

Answer 6

您应该使用flexbox和media queries

<强> CSS ：

.container > div {
    display: block;
}

@media (min-width: 640px) {
    .container {
        display: flex;
    }
    .container > div {
        flex: 1 1 auto;
    }
}

对于flexbox，所有容器子级都将具有相同的高度。

CSS技巧教程：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如何使这三个对齐div响应？

6 个答案: