怎么让两张图片并列显示?

baiyygynui888
  • 856

最终效果为:

clipboard.png

                <div class="bridge-scenes-warp">
                    <div class="scenes-item">
                        <img src="img/bridge02.png" alt="" class="scenes-pic" />
                        <div class="scenes-info r">
                            <h2 class="scenes-title black">Unlock your Ultraloq anytime, from anywhere</h2>
                            <p class="scenes-des black">Let friends, guests and service people into your home remotely</p>
                        </div>
                    </div>
                    <div class="scenes-item">
                        <img src="img/bridge03.png" alt="" class="scenes-pic" />
                        <div class="scenes-info r">
                            <h2 class="scenes-title white">Share Ekey Remotely</h2>
                            <p class="scenes-des white">Grant access to guests and visitors via an eKey for specific dates or periods of time with no monthly fees!</p>
                        </div>
                    </div>
                    <div class="scenes-item">
                        <img src="img/bridge04.png" alt="" class="scenes-pic" />
                        <div class="scenes-info l">
                            <h2 class="scenes-title white">Smart Alerts and Notifications</h2>
                            <p class="scenes-des white">Get instant alerts every time someone unlocks your door </p>
                        </div>
                    </div>
                    <div class="scenes-item">
                        <img src="img/bridge05.png" alt="" class="scenes-pic" />
                        <div class="scenes-info l">
                            <h2 class="scenes-title black">View logs on the Go</h2>
                            <p class="scenes-des black">Always know who’s entered and exactly when and how they did.</p>
                        </div>
                    </div>
                    <div class="scenes-item">
                        <img src="img/bridge10.png" alt="" class="scenes-pic" />
                        <div class="scenes-info l">
                            <h2 class="scenes-title black">Work with Alexa </h2>
                            <p class="scenes-des black">Ask Alexa to lock, unlock your door and check door status.</p>
                        </div>
                    </div>
                    <div class="scenes-item">
                        <img src="img/bridge06.png" alt="" class="scenes-pic" />
                        <div class="scenes-info l">
                            <h2 class="scenes-title white">Plug and Go</h2>
                            <p class="scenes-des white">Just plug into power and connect to your home Wi-Fi network</p>
                        </div>
                    </div>
                </div>

怎么显示一行两张图片并列?
我这样写,结果成屎了

    .bridge-scenes-warp{
        width: 100vw;
        height: 100%;
        margin: 0 auto;
        display: inline-block;
        .scenes-item{
            display: inline-block;
            position: relative;
            margin-right: 5px;
            height: 35vw;
            width: 50vw; 
            &:nth-child(2n){
                margin-right: 0;
            }
            .scenes-pic{
                vertical-align: -webkit-baseline-middle;
                text-align: center;
                width: 50vw;
                height: 100%;
                flex: 1 1 auto;
            }
            .scenes-info{
                width: 50%;
                .scenes-title{}
                .scenes-des{}
            }
            .r{
                text-align: left;
                position: absolute;
                bottom: 2vw;
                right: 2vw;
            }
            .l{
                text-align: left;
                position: absolute;
                bottom: 2vw;
                left: 2vw;
            }
            .black{
                color: $color-black;
            }
            .white{
                color: $color-f1;
            }
        }
    }
    

clipboard.png
要做成这样的布局:一行两张图片,自适应显示,这里有三行,共六张图片,要怎么写呢?
如果要用下面的方法,是可以实现,但是做自适应就很难做了。

        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-gap: 10px 10px;
回复
阅读 7.6k
5 个回答

不清楚你要写的具体是怎样的,flex应该可以帮到你

KNJON
  • 98

图片外包裹DIV,div宽度50%,图片宽度100%,这样会根据宽度进行自适应,有可能高度有空白;宽度100%,高度100%就会拉伸图片,
如果你要固定适口的而且图片铺满适口不伸缩,就只能裁剪了。

小哈
  • 214
.bridge-scenes-warp{
        width: 100vw;
        height: 100%;
        margin: 0 auto;
        display: inline-block;
        .scenes-item{
            display: inline-block;
            position: relative;
            box-sizing: border-box;
            margin-right: 5px;
            height: 35vw;
            width: 50v%; 
            &:nth-child(2n){
                margin-right: 0;
            }
            .scenes-pic{
                display:block;
                width: 100%;
                height: 100%;
            }
            .scenes-info{
                width: 50%;
                .scenes-title{}
                .scenes-des{}
            }
            .r{
                text-align: left;
                position: absolute;
                bottom: 2vw;
                right: 2vw;
            }
            .l{
                text-align: left;
                position: absolute;
                bottom: 2vw;
                left: 2vw;
            }
            .black{
                color: $color-black;
            }
            .white{
                color: $color-f1;
            }
        }
    }
如果还不对,参考下下面的demo
``` html
<div className={styles['box']}>
<div className={styles['item']}>
  <img src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2238177175,2194918470&fm=27&gp=0.jpg' alt='' />
</div>
<div className={styles['item']}>
  <img src='https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2918208022,2332314239&fm=27&gp=0.jpg' alt='' />
</div>

</div>


```
```css
.home {
font-size: medium;

}

.box {

.item {
    display: inline-block;
    padding-right: 5px;
    box-sizing: border-box;
    width: 50%;
    img {
        display: block;
        width: 100%;
        height: 100%;
    }
}

}


![clipboard.png](/img/bVbcuAH)

还是用grid做的,下面是答案:

            display: grid;
            grid-template-columns: repeat(2,1fr);
            grid-gap: 10px 6px;
            @media screen and (max-width: 850px){
                display: grid;
                grid-template-columns: repeat(1,1fr);
            }
xuliang
  • 692
宣传栏