Question

这是我的代码现在的位置：

这是我想要实现的设计：

我尝试了相对位置和边距，但是我使用的方法最终影响了我的页面的响应能力。在保持网页能够适应屏幕尺寸变化的同时，将这些元素放在上述设计中的最佳方法是什么？

Answer 1

您可以使用bootstrap获取响应式设计。使用引导程序时，可以使用网格系统来管理元素。 class“row”将为您提供一个分为12个相等列的网格。然后，您可以根据您的设计使用col-md-x / col-sm-x来定位元素。您可以参考http://getbootstrap.com/css/进一步了解。换句话说，使用col-md-3显示图像，使用col-md-9获取信息。它会起作用。

示例仅供参考：

 <div class="row">
     <div class="col-md-3">
       <img /> <-- put your image here -->
     </div>
     <div class="col-md-9">
       <-- put your texthere -->
     </div>
 </div>
 <div class="row">
     <div class="col-md-9">
       <-- put your texthere -->
     </div>
     <div class="col-md-3">
       <img /> <-- put your image here -->           
     </div>
 </div>

在这个特定设计中定位这些元素的最佳方法是什么？

1 个答案: