水平对齐并水平添加 div 项

Question

我正在使用以下代码

<div style="display: table; width: 50%; clear: both; ">
    <div style="width: 50%; float: left;">
        <h1 style="font-size: 30px; font-weight: 600; color: #000;">
            <span><?php echo $genericItem;?></span>
            <img style="margin-left: 20px; height: 50px; width: 50px;" src="<?php echo $genericItemPath;?>" alt=""> 
        </h1>
    </div>
    <div style="width: 50%; float: right; margin-left: 25px;">
            <span style="font-size: 20px; color: #000"><b>Reorder</b> in <?php echo $reorderDays;?> days</span>
            <span style="display: block;  font-size: 12px; color: #d3d3d3; max-width: 90%;"><?php echo $reorderDate;?></span>
    </div>
</div>

创造这样的东西

然而，第二个重新排序 div 显示在下方但在右侧。 如何修改 div。

Answer 1

我希望这有帮助。 我认为使用flex是制作列的最佳方式，它也适用于您想要做的事情。 除此之外， flex是现代网站开始使用的一种属性。

 .table { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; }.column { display: flex; flex-direction: column; flex-basis: 100%; flex: 1; justify-content: center; text-align: center; } /* extra */.column2 {background-color: #f8f8f8;}

 <div class="table"> <div class="column">Apple</div> <div class="column column2"> <p><b>Re-order:</b> in 3 days</p> <p>Tuesday 19-9-2018</p> </div> </div>

更新：您可以删除justify-content和text-align以及.column2 。 我只有它们，所以您可以欣赏这些列的外观。

Answer 2

你有width: 50%但也有一个margin-left: 25px这使你的第二个 div 超过你的屏幕宽度。

尝试删除margin-left ，在这种情况下，第二个 div 应该向右浮动。 如果要在它们之间添加间距，请增加父宽度或减小每个 div 的宽度。

Answer 3

试试这样。

<div style="display: table; width: 50%; clear: both; ">
    <div style="width: calc( 50% - 1px ); float: left;">
        <h1 style="font-size: 30px; font-weight: 600; color: #000;">
            <span><?php echo $genericItem;?></span>
            <img style="margin-left: 20px; height: 50px; width: 50px;" src="<?php echo $genericItemPath;?>" alt=""> 
        </h1>
    </div>
    <div style="width: calc( 50% - 25px ); float: right; margin-left: 25px;">
            <span style="font-size: 20px; color: #000"><b>Reorder</b> in <?php echo $reorderDays;?> days</span>
            <span style="display: block;  font-size: 12px; color: #d3d3d3; max-width: 90%;"><?php echo $reorderDate;?></span>
    </div>
</div>