Div 不会在同一行向左浮动

Question

我正在制作一个包含三个元素的页脚，一个 h3 和两个 divs，所有元素都浮动到右边并带有边距百分比。

问题是第三个元素 (div2) 在第一个 div 下方而不是向左浮动。

这是我的代码，我知道内联样式不是个好主意。

<div class="container" style="width:100%; height:70px; position:relative; float:left; padding:2%;">
  <h3 style="float:left; position:relative; margin-right:15%; top:50%; transform:translateY(-50%); ">Contact our experts</h3>
  <div class="telcontainer" style="margin-right:15%; width:auto; height:32px; position:relative; top:50%; transform:translateY(-50%); overflow:hidden; ">
    <img src="https://images.petsmartassets.com/is/image/PetSmart/icon-experts-call?$GN1201$" style="width:32px; height:32px; position:relative; float:left;">
    <h3 style="position:relative; float:left; margin-left:1%;">694003903</h3>
  </div>
  <div class="mailcontainer" style=" width:auto; height:32px; position:relative; top:50%; transform:translateY(-50%); overflow:hidden; ">
    <img src="https://images.petsmartassets.com/is/image/PetSmart/icon-experts-call?$GN1201$" style="width:32px; height:32px; position:relative; float:left;">
    <h3 style="position:relative; float:left; margin-left:1%;">Mail Us</h3>
  </div>
</div>

Answer 1

您有 position:reltive 而不是 position:rela。如果您更正它，这会改变什么吗？

Answer 2

如果您想对齐行或列中的项目，请尝试使用 display: flex。会省去很多麻烦 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

<div class="container" style="width:100%; padding:2%; display: flex; align-items: center; flex-direction: column">
  <h3 style="float:left;">Contact our experts</h3>
  <div class="telcontainer" style="width:auto; position:relative; display: flex">
       <img src="https://images.petsmartassets.com/is/image/PetSmart/icon-experts-call?$GN1201$" style="width:32px; height:32px; position:relative; float:left;">
       <h3>694003903</h3>
     </div>
     <div class="mailcontainer" style=" width:auto; position:relative; display: flex">
       <img src="https://images.petsmartassets.com/is/image/PetSmart/icon-experts-call?$GN1201$" style="width:32px; height:32px; position:relative;">
       <h3>Mail Us</h3>
    </div>
  </div>

Div 不会在同一行向左浮动

Div wont float to the left in the same line

html

text

floating