更改屏幕寬度時Div位置發生變化

Question

我試圖設計類似picture的東西。當我更改瀏覽器寬度時，兩個div不能正常保持。如果我給兩個div float:left，它們會保持垂直，但是當我更改屏幕大小時它會斷開。

我怎樣才能保持divs在一起，像圖片一樣的邊界內？

ol { 
 
    list-style-type: none; 
 
    padding: 0; 
 
} 
 

 
ol .search-result { 
 
    position: relative; 
 
    display: block; 
 
    min-height: 220px; 
 
    color: #000; 
 
    padding: 10px 5px; 
 
} 
 

 
.media-box { 
 
    float: left; 
 
} 
 

 
.search-result-item { 
 
    overflow: auto; 
 
    max-width: 600px; 
 
    padding-top: 7px; 
 
    padding-bottom: 7px; 
 
} 
 

 
.search-item-box { 
 
    border: 1px solid #DDD; 
 
    min-height: 226px; 
 
    transition: box-shadow .2s ease-in-out; 
 
    -webkit-border-radius: 2px; 
 
    -moz-border-radius: 2px; 
 
    border-radius: 2px; 
 
} 
 

 
.search-item-box:hover { 
 
    -webkit-box-shadow: 14px 13px 20px -9px rgba(0, 0, 0, 0.36); 
 
    -moz-box-shadow: 14px 13px 20px -9px rgba(0, 0, 0, 0.36); 
 
    box-shadow: 14px 13px 20px -9px rgba(0, 0, 0, 0.36); 
 
} 
 

 
.item-price-promo-container { 
 
    padding: 5px; 
 
    width: 180px; 
 
    background-color: #fff; 
 
    height: 100%; 
 
    margin-left: 350px; 
 
    float: left; 
 
}

<ol id="searchListContainer" class="search-list-container"> 
 
<li class="search-result"> 
 
    <a id="hotel-id" class="search-result-item" href="#" target="_blank"> 
 
     <section class="search-item-box"> 
 
      <div class="media-box"> 
 
       <figure class="media"> 
 
        <img src="https://s15.postimg.org/7w2xbeufv/image.jpg" height="225" 
 
         width="225" 
 
         alt="1.jpg"/> 
 
       </figure> 
 
      </div> 
 
      <div class="item-price-promo-container"> 
 
       <div class="item-review-container"> 
 
        <ul class="item-star-rate"> 
 
         <li class="item-star-rate-container review-item"> 
 
          <strong class="item-star-rate-symbol">&#9733;</strong> 
 
          <strong class="item-star-rate-number">3.5</strong> 
 
         </li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </section> 
 
    </a> 
 
</li>

謝謝！

Answer 1

通過使用CSS Flexbox，您可以在這裏簡化很多事情。

假設您想將每個li水平分爲三個部分。

• 你想要首節是225px寬。當頁面寬度的變化，你不希望它長得比這更大，你不希望它收縮小於：flex: 0 0 225px;

• 你想要最後一節是325px寬。當頁面寬度的變化，你不希望它長得比這更大，你不希望它收縮小於：flex: 0 0 325px;

• 你想要中段填補之間的水平差距第一節和最後一節。你不介意它的增長較大（如頁面擴大），如果它收縮小，你不介意（如頁面縮小）：flex: 1 1 calc(100% - 550px);

工作實例：

ol { 
 
margin: 0; 
 
padding: 0; 
 
} 
 

 
li { 
 
display: flex; 
 
height: 100px; 
 
margin-bottom: 6px; 
 
border: 1px solid rgb(227,227,227); 
 
list-style-type: none; 
 
} 
 

 
li div:nth-of-type(1) { 
 
flex: 0 0 225px; 
 
background-color: rgb(255,0,0); 
 
} 
 

 
li div:nth-of-type(2) { 
 
flex: 1 1 calc(100% - 550px); 
 
background-color: rgb(255,255,0); 
 
} 
 

 
li div:nth-of-type(3) { 
 
flex: 0 0 325px; 
 
background-color: rgb(0,127,0); 
 
}

<ol> 
 
<li> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
</li> 
 

 
<li> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
</li> 
 

 
<li> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
</li> 
 
</ol>

Answer 2

首先你忘記了關閉</ol>標籤。

如果你想保留的div浮動，您可以使用％的寬度或顯示：表和顯示：表細胞 小提琴：https://jsfiddle.net/edtyv9tr/1

新的CSS：

ol { 
    list-style-type: none; 
    padding: 0; 
} 

ol .search-result { 
    position: relative; 
    display: block; 
    color: #000; 
    padding: 10px 5px; 
} 

.media-box { 
    display: table-cell; 
    width: 225px; 
} 

.media-box img { 
    vertical-align: middle; /* Remove spacing below image */ 
} 

.media { 
    margin: 0; /* Remove natural padding around the figure tag */ 
} 

.search-result-item { 
    max-width: 600px; 
    padding-top: 7px; 
    padding-bottom: 7px; 
} 

.search-item-box { 
    display: table; 
    width: 100%; 
    border: 1px solid #DDD; 
    transition: box-shadow .2s ease-in-out; 
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px; 
    border-radius: 2px; 
} 

.search-item-box:hover { 
    -webkit-box-shadow: 14px 13px 20px -9px rgba(0, 0, 0, 0.36); 
    -moz-box-shadow: 14px 13px 20px -9px rgba(0, 0, 0, 0.36); 
    box-shadow: 14px 13px 20px -9px rgba(0, 0, 0, 0.36); 
} 

.item-price-promo-container { 
    padding: 5px; 
    background-color: #fff; 
    display: table-cell; 
    vertical-align: top; 
}