我正在使用以下代码
<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。
答案 0 :(得分: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
。我只有它们,因此您可以欣赏这些列的外观。
答案 1 :(得分:0)
您有width: 50%
,但还有一个margin-left: 25px
,这使您的第二个div超出了屏幕宽度。
尝试删除margin-left
,在这种情况下,第二个div应该向右浮动。
如果要在它们之间增加间距,请增加父级宽度或减小每个div宽度。