在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML5  HTML/ 讓兩個(gè)div 在同一列可以並行且填滿？

讓兩個(gè)div 在同一列可以並行且填滿？

clipboard.png

這是兩個(gè)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;
}

但始終都無(wú)法兩個(gè)div填滿在同一排.....
他都會(huì)變上下

回答
編輯回答
挽歌

你這邊問(wèn)題我遇到過(guò),雖然你把div的display設(shè)置為inline-block了,但是很奇怪的是兩個(gè)div標(biāo)簽之間的換行似乎還是要占用一些位置,導(dǎo)致雖然他們寬度是50%, 加一起是100%,但是依舊不能并排.你要把兩個(gè)div標(biāo)簽之間的空格去掉.

比如這樣:

<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>
2017年10月21日 04:16
編輯回答
話寡

外面套一個(gè)父級(jí)div 使用flex布局

2017年5月9日 08:50
編輯回答
失魂人

換行符導(dǎo)致的，使用float,或者在父級(jí)使用flex

2017年1月4日 23:08
編輯回答
歆久

現(xiàn)在不是填滿在同排了嗎？

2017年1月19日 18:52
編輯回答
青檸
<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>

更新一下。
你的代碼里，兩個(gè)div之間是有一個(gè)換行符的，當(dāng)設(shè)置為inline-block元素時(shí)，如果父元素的font-size不是0，那這個(gè)換行符是會(huì)占一定空間的，導(dǎo)致這個(gè)父元素里的子元素總寬度是50% + 換行符寬度 + 50%，也就導(dǎo)致第二個(gè)div被擠到下面去。

所以解決方法是：

  1. 壓縮html，去除換行；
  2. 父元素font-size設(shè)置為0，div重置font-size；
  3. 寬度設(shè)置為49%或更小。

另外，你們總是說(shuō)要用Flex布局，但是又不問(wèn)樓主（？）是否需要考慮兼容性，這樣真的好嘛？怎么不說(shuō)用Grid布局呢？

2017年4月8日 17:12