Two div can be paralleled in the same column and filled in?

these are two 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;
}

but it is not possible to fill in two div in the same row at first.
he will change up and down

Html html5 div--label css3 css

Mar.10,2021

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

update it.
in your code, there is a newline character between the two div. When set to the inline-block element, if the font-size of the parent element is not 0, the newline character will take up a certain amount of space. As a result, the total width of the child element in the parent element is 50% + the width of the newline character + 50% , which causes the second div to be squeezed below.

so the solution is:

compress html, to remove line breaks;
parent element font-size is set to 0pm div reset font-size;
width is set to 49% or less.

< del > besides, you always say you want to use Flex layout, but you don't ask the landlord (? Is it really good to consider compatibility? Why not use Grid layout? < / del >

is not filling in the same row now?

if a parent div is wrapped around a flex layout

newline character, use float, or use flex

at the parent.

I have encountered a problem on your side. Although you set the display of div to inline-block, it is strange that the line wrapping between the two div tags still seems to take up some space, so that although their width is 50% and the total is 100%, they still cannot be side-by-side. You need to remove the space between the two div tags.

for example:

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

Previous: The val of watch in vue is the same as oldVal. How to deal with it?

Next: In the project built by react, the bootstrap style doesn't work?

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e4bda5-4341a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e4bda5-4341a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?