水平對齊並水平添加 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>