0

我正在努力解决如何在 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在必要时添加 grouping 。

假设 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.

我不想依赖脚本来移动元素。有人能想出一个简单的方法来完成我想在这里做的事情吗？

4

2 回答 2

0

使用您将图像向右浮动和向左浮动的解决方案，而不是clear: both在p标签上使用clear:left.

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

于 2013-05-05T14:09:48.127 回答
0

我个人认为Dreamweaver CS6 的流体网格布局 将帮助您实现这一目标。您可以在上面的链接中找到您需要的所有信息，或者直接从 Adob​​e 网站观看此视频以了解其工作原理。这是您可能想知道的一小段信息

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

于 2013-05-05T14:27:36.953 回答