更改屏幕宽度时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; 
}