html - 水平对齐并水平添加div项 - SO中文参考 - www.soinside.com

来自 : www.soinside.com/question/Uh8S 发布时间：2021-03-24

span b Reorder /b in ?php echo $reorderDays;? days /span span ?php echo $reorderDate;? /span /div /div
要创建类似这样的内容 但是第二个重新排序div显示在下方但在右侧。如何修改div。html css 3个回答0投票 您有width: 50%,但还有一个margin-left: 25px,这使...我正在使用以下代码 [[[[]]]] 您有width: 50%，但还有一个margin-left: 25px，这使您的第二个格超出了屏幕宽度。 尝试删除margin-left，在这种情况下，第二个div应该向右浮动。如果要在它们之间增加间距，请增加父级宽度或减小每个div宽度。 像这样尝试。 <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> 我希望这会有所帮助。我认为使用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>html