Question

我正在尝试设计类似picture的内容。当我改变浏览器宽度时，两个div不能保持正常。如果我给两个div float:left，它们会保持垂直，但是当我更改屏幕尺寸时它会被打破。

如何将div放在一起并保持在边框内？如图所示？

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

首先，你忘记了结束＆lt; / ol＆gt;标签

如果你想保持div漂浮，可以使用百分比宽度或 display：table 和 display：table-cell 小提琴：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;
}

Answer 2

您可以使用 CSS Flexbox 来简化操作。

我们假设您希望将每个li水平分割为三个部分。

您希望第一部分为225px宽。当页面宽度发生变化时，您不希望它变得比这更大，您不希望它缩小到小于：flex: 0 0 225px;
您希望最后一部分为325px宽。当页面宽度发生变化时，您不希望它变得比这更大，您不希望它缩小到小于：flex: 0 0 325px;
您希望中间部分填充第一个和最后一个部分之间的水平间隙。如果它变得越来越大（随着页面变宽），你不会介意，如果它缩小（当页面变窄时）你就不会介意：flex: 1 1 calc(100% - 550px);

工作示例：

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

在更改屏幕宽度时划分位置更改

2 个答案: