讓兩個div 在同一列可以並行且填滿?

clipboard.png

這是兩個div

<div onclick="location.href='news';" class="news_other_layout" style="background-image: url('');">
</div>
<div onclick="location.href='news';" class="news_other_layout" style="background-image: url('');">
</div>
.news_other_layout{
 margin-top: 70px;
 position: relative;
 width: 50%;
 height: 300px;
 display: inline-block;
 object-fit: cover;
 background-repeat:no-repeat;
 background-size: cover;
}

但始終都無法兩個div填滿在同一排.....
他都會變上下

阅读 1k
评论
    5 个回答
    <div onclick="location.href='news';" class="news_other_layout" style="background-image: url('');">
    </div><div onclick="location.href='news';" class="news_other_layout" style="background-image: url('');">
    </div>

    更新一下。
    你的代码里,两个div之间是有一个换行符的,当设置为inline-block元素时,如果父元素的font-size不是0,那这个换行符是会占一定空间的,导致这个父元素里的子元素总宽度是50% + 换行符宽度 + 50%,也就导致第二个div被挤到下面去。

    所以解决方法是:

    1. 压缩html,去除换行;
    2. 父元素font-size设置为0,div重置font-size;
    3. 宽度设置为49%或更小。

    另外,你们总是说要用Flex布局,但是又不问楼主(?)是否需要考虑兼容性,这样真的好嘛?怎么不说用Grid布局呢?

      相似问题
      推荐文章