Question

我想在容器div中对齐两个div。但正确的div（尺寸较小）粘在容器div的右上角。相反，我希望它们两者互相排列。

以下是我一直在尝试的代码：

<div class = "row">
<div style = "float: left"> <h1> HUGE CONTENT </h1> </div>
<div style = "float: right"> <p> small text </p> </div> 
<div style= "clear: both;"> </div>
</div>

div的内容是动态加载的。所以不能使用width属性！这样就不同于我发现的现有问题。

感谢任何帮助。感谢。

Answer 1

<div class = "row">
<div style='50%;border:none'> <h1> HUGE CONTENT </h1> </div>
<div style='50%;border:none'> <p> small text </p> </div> 
</div>

Answer 2

我认为你应该设置宽度并保持两者＆＃34; float：left＆＃34;

这可能会对你有所帮助

<div class = "row" >
   <div style = "float: left; width : 60%"> <h1> HUGE CONTENT </h1> </div>
   <div style = "float: left; width  : 30%; padding : 5%"> <p> small text </p> </div> 
</div>

使用适当的宽度和填充，您可以获得所需的外观。

让我知道任何帮助

Answer 3

<div class = "row">
<div class ="row_block1"> <h1> HUGE CONTENT </h1> </div>
<div class ="row_block2"> <p> small text </p> </div> 
<div style= "clear: both;"> </div>
</div>

<style>
   .row
   {
      width: 100%;
      display: block;
   }
   .row_block1
   {
      background: #e6e6e6;
      display: table-cell;
      margin-right: 5px;
   }
   .row_block2
   {
      background: #B28080;
      display: table-cell;
      margin-right: 5px;
   }


</style>

Answer 4

由于您有3个div但最后一个看不见，因此显示：inline-block + text-align：justify对于您要查找的结果就好了。的 DEMO

CSS：

.row { text-align:justify; } .row > div { display:inline-block; } .fix { width:100%; }

使用class更新HTML：

<div class = "row"> <div class="left" > <h1> HUGE CONTENT </h1> </div> <div class="right"> <p> small text </p> </div> <div class="fix"> </div> </div>

如何在div容器中水平对齐两个div？

4 个答案: