Question

我试图将一个div中的两个div对齐在一行中。我尝试过以下代码：

<div style="width:100%">
 <div id="id1" style="width:40%;float:left;background-color:green;position:relative">
   float-left
 </div>
 <div id="id2" style="width:60%;float:right;background-color:yellow;position:relative">
 float-right
   <div id="id3" style="position:relative;left:0px">
   button1
   </div>
    <div id="id4" style="position:absolute;right:0px">
   button2
   </div>
 </div>
</div>

我需要在与span相同的行中使用id3和id4的div，但我不想在id2 div中使用span标记？

我尝试使用position作为绝对值和相对值以及组合，但它没有在同一行内对齐。我错过了什么？

Answer 1

只需添加display:inline-block

<div style="width:100%">
 <div id="id1" style="width:40%;float:left;background-color:green;position:relative">
   float-left
 </div>
 <div id="id2" style="width:60%;float:right;background-color:yellow;position:relative">
   <div id="id3" style="display:inline-block;">
   button1
   </div>
    <div id="id4" style="display:inline-block;">
   button2
   </div>
 </div>
</div>

Answer 2

试试这个。

＆＃13;

{{1}}

＆＃13;

Answer 3

最佳解决方案是设置display: inline-block，如下所示：

 <div id="id2" style="width:60%;float:right;background-color:yellow;position:relative">
 float-right
   <div id="id3" style="display: inline-block;">
   button1
   </div>
    <div id="id4" style="display: inline-block;">
   button2
   </div>
 </div>
</div>

您还可以添加属性top: 0px，这将为您提供相同的结果。但是，由于您的确切问题，display: inline-block更加清晰且存在。

div最初是一个块，因此跨越其父元素的整个宽度。这意味着div被置于彼此之下，如果他们没有被告知inline-block，这将使他们“包裹”他们的内容。

为您的元素添加边框，并查看inline-block和block之间的区别。

Answer 4

Flex是您的朋友，无需添加这些内联样式：

＆＃13;

.container {
  display: flex;
}

#id1 {
  flex: 0 0 40%;
}

#id2 {
  flex: 0 0 60%;
  display: flex;
}

#id3,
#id4 {
  margin: 0 auto;
}

div {
  border: 1px solid red;
  box-sizing: border-box;
}

＆＃13;

<div class="container">
  <div id="id1">
    float-left
  </div>
  <div id="id2">
    float-right
    <div id="id3">
      button1
    </div>
    <div id="id4">
      button2
    </div>
  </div>
</div>

＆＃13;

然后你可以简单地调整值和对齐以获得你需要的东西。

Answer 5

您可以使用Flex-box设计来确定div和其他块级元素的布局。虽然检查浏览器的兼容性参考。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

<div style="width:100%">
     <div id="id1" style="width:40%; float:left; background-color:green; position:relative">
       float-left
     </div>
     <div id="id2" style="width:60%; float:right; background-color:yellow; position:relative; display:flex; flex-direction:row">
       float-right
       <div id="id3" style="position:relative; left:0px;">
         button1
       </div>
       <div id="id4" style="position:absolute;right:0px;">
         button2
       </div>
     </div>
</div>

将div对齐在一行中

5 个答案: