Question

我正在努力解决如何在CSS（带媒体查询）中指定涉及标题，图表和文本的布局，这取决于我们是处于纵向还是横向模式。它的目标是iPhone大小的设备，因此空间非常宝贵。

在纵向模式下，我希望它看起来像

HEADING

      XXXXXXXXXXXXXXXXX
      XXXX         XXXX
      XXXX Diagram XXXX
      XXXX         XXXX
      XXXXXXXXXXXXXXXXX

Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, 
sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua.

在横向模式下，我希望它看起来像

HEADING                    XXXXXXXXXXXXXXXXX
                           XXXX         XXXX
Lorem ipsum dolor sit      XXXX Diagram XXXX
amet, consectetur          XXXX         XXXX
adipisicing elit,          XXXXXXXXXXXXXXXXX  
sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua.

HTML由标题的h3标记，图表的IMG标记以及文本的一个或多个p标记组成，目前按此顺序排列。我可以按照我想要的任何方式重新安排这些，和/或在必要时添加分组div。

假设HTML元素按标题/图像/文本排序，我默认获得纵向布局。对于横向，如果我只是将图表指定为float: right;，我会得到

HEADING                    

Lorem ipsum dolor sit      XXXXXXXXXXXXXXXXX
amet, consectetur          XXXX         XXXX
adipisicing elit,          XXXX Diagram XXXX  
sed do eiusmod tempor      XXXX         XXXX
incididunt ut labore et    XXXXXXXXXXXXXXXXX
ore magna aliqua.

但我希望图表顶部与标题对齐，以避免在标题右侧浪费空白。

我也可以漂浮左边的标题，但后来我得到了像

这样的疯狂

HEADING Lorem ipsum dolor  XXXXXXXXXXXXXXXXX
amet, consectetur          XXXX         XXXX
adipisicing elit,          XXXX Diagram XXXX  
sed do eiusmod tempor      XXXX         XXXX
incididunt ut labore et    XXXXXXXXXXXXXXXXX
ore magna aliqua.

但是如果我添加一个CSS规则，例如p {clear: both; }，那么文本会跳到图表下方，如

HEADING                    XXXXXXXXXXXXXXXXX
                           XXXX         XXXX
                           XXXX Diagram XXXX  
                           XXXX         XXXX
                           XXXXXXXXXXXXXXXXX

Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

我不想依靠脚本来移动元素。有人可以想到一个简单的方法来完成我想要做的事情吗？

Answer 1

使用右侧浮动图像和左侧标题的解决方案，而不是clear: both标记上的p使用clear:left。

我认为，请参阅此jsFiddle，它可以满足您的需求。

Answer 2

我个人认为Fluid Grid Layout Dreamweaver CS6将帮助您实现这一目标。您可以在上面的链接中找到所需的所有信息，或直接从Adobe网站观看this video以了解其工作原理。这是您可能想知道的一小段信息

流体网格布局可帮助您构建适合不同屏幕尺寸的页面。您可以直观地设计布局，Dreamweaver会在实时视图中显示它们。您可以创建纯CSS3过渡以在计算机，智能手机和平板电脑上显示动画效果

标题，图表和文本的响应式布局（纵向与横向）

2 个答案: