css - 内联 block 有时有效

Question

大家好，我现在做噩梦了，我不确定是什么导致了这个奇怪的问题。

基本上，有时我设置为内联 block 的元素起作用，然后当我刷新浏览器时，它们决定不再想要内联。

这是我的 HTML:

      <div class="col-md-8 col-sm-8 col-lg-8">
        <div class="listing-container">
          <h3 class="model-listing-title clearfix">2011 (11) Mercedes-Benz C Class C250 CDI BlueEFFICIENCY Sport 4dr Auto</h3>
          <h3 class="price-listing clearfix">£17,998</h3>
        </div>
        <div class="listing-container-spec">
          <img src="media/img/mercedes-test.jpg" alt="mercedes-benz"/>
        </div>
      </div>

这是我的 CSS:

.listing-container {
    background-color:#dddddd;
    padding:0;
    border-radius:6px 6px 0 0;
    -moz-box-shadow:inset 0 0 10px #000000;
    -webkit-box-shadow:inset 0 0 10px #000000;
    box-shadow:inset 0 0 5px #9e9e9e;
    padding:1px 10px;
    overflow:auto;
}

.listing-container-spec {
    background-color:#153066;
    width:100%;
    height:auto;
    display:block;
    position:relative;
}

.listing-container-spec img {
    max-width:60%;

}

.model-listing-title {
    font: 600 1.5em 'Open Sans', sans-serif;
    margin-top:0.1em;
    display:inline-block;
    width:75%;
}



.price-listing {
    font: 700 2em 'Open Sans', sans-serif;
    margin-top:0.1em;
    display:inline-block;
    float:right;
    margin-top:0.1em;
}

它应该是这样的:

这是在几次刷新之后:

我正在使用 bootstrap，所以你知道，但是如果我将该代码放入 JSFiddle，它可以正常工作，但是在我的实时网站上，它几乎在每次刷新时都会改变它的位置。

知道为什么会这样吗？

这是一个活生生的例子:http://dealerbyte.co.uk/used-cars.php

Answer 1

这是我在 Chrome 开发工具中所做的似乎解决了这个问题。

1. 从 .model-listing-title 和 .price-listing 中移除 display: inline-block;
2. 将 float: left; 添加到 .model-listing-title