css - HTML、CSS、内联 block Safari 浏览器

Question

元素的下一个位置

 
           * {
   box-sizing: border-box;
    }

 .container {
    width: 100%;
    font-size: 0;
    }
    
.container>div {
     display: inline-block;
     width: 50%;
     height: 100px;
     font-size: 1rem;
     bacground-color: #654fca;
     }

<div class='container'>
      <div class='item-left'>
      <div class='item-right'>
    </div>

所有浏览器都将 element-left 和 element-right 水平放置，一个接一个。只有适用于 Windows 的漂亮浏览器 Safari 才能竖直放置，将它们向左按。谁能解释一下，或者告诉在哪里可以阅读有关在 Safari 浏览器中计算宽度的信息，因为如果将元素的宽度减少 49%，元素将变为水平，但边缘保留空间。

Answer 1

以这种方式更新您的 css，您无需担心浏览器兼容性:

添加到您的 css:(保持您原来的样式)

 .container>div.item-left {
    float:left;
  } 

 .container>div.item-right {
     float:right;
   }