-1

我的布局是这样的：

<section class="container">
  <div class="picture-div">
    <figure><img src="blah"></figure>
    <figure><img src="blah"></figure>
    ...
  </div>
  <div class="text-div">
    <p>Text which could be very very very very very very very very very very very very very very very very very very long</p>
    <p>Text which could be very very very very very very very very very very very very very very very very very very long</p>
    ...
  </div>
</section>

picture-div 和 text-div 都根据其内容具有动态宽度。picture-div 的最小宽度为 500px，text-div 的最小宽度为 300px。

我想要一个符合以下规则的动态效果：

  1. 容器后面的元素应该清除浮动并且内容完全低于容器元素。
  2. 如果视口宽度不够，水平滚动条应始终放置在 HTML 元素上，而不是容器、picture-div 或 text-div 元素上。
  3. 如果容器宽度超过（picture-div width + 300px），text-div 会浮动在picture-div 的右侧并占据容器的整个左侧空间。（例如，如果容器宽度为 2000 像素，图片 div 宽度为 800 像素，则图片 div 为 800 像素，文本 div 为 1200 像素。）
  4. 如果容器宽度不超过（picture-div 的宽度 + 300px），则 text-div 不会浮动，并且 picture-div 和 text-div 都会占用整个容器空间。（例如，如果容器宽度为 1000px，picture-div 宽度为 800px，那么picture-div 和 text-div 都取 1000px）

有没有一个纯 CSS 解决方案？

4

1 回答 1

0

就您可能要求的语法而言，我对语法有点不满意，但我想我会试一试，看看您是否可以按照这个来解决您的问题。

听起来您想要一个响应式布局，该布局将响应最大屏幕宽度并在窗口显示的每个最大或最小宽度处执行特定操作。浮点数只是您可以添加的不同类，我通常只是使用class="fl"并将其包含在我的 css 中。这是我所拥有的一个小例子，几乎可以满足您的要求。

<div id="panel-1-index">
 <div class="row">
  <div class="large-4 columns">
   <img src="your-image.gif"/>
  </div>
  <div class="large-8 columns">
   <p>Your Text Content</p>
  </div>
 </div>
</div>

然后你的css会将每一个关联class="large-* columns"为一定的宽度百分比。对于上面的示例，它将是：

.large-4 { position:relative;width:33.333% }
.large-8 { position:relative;width:66.667% }

行和列 css 属性本质上只是为您提供特定的填充参数和 100% 宽度。之后，它只涉及添加媒体查询，根据屏幕宽度为类提供不同的行为。

我给你的例子是在我自己的网站上使用 Zurb Foundation css 框架。您问题的第一部分我无法真正回答，因为我不知道 - 但其余部分可以通过查看响应式设计的 Foundation 框架样式来完成。根据我非常有限的经验，我还建议不要使用像素进行测量，而是使用百分比或 em 测量来获得更好的响应式设计。

让我知道我是否离你很远，或者只是想告诉你一些你已经知道的事情:)

于 2013-07-24T13:50:38.547 回答