Question

到目前为止，这是我的工作：http://jsfiddle.net/Jm6C4/1/

页面结构如下：

<div id="hero">
    <div id="heroText">
        <!-- Text on the front of the homepage -->
    </div>
    <div id="heroImage">
        <!-- Image to match -->
    </div>
</div>

<div id="news">
    <div id="newsPane">
        <!-- Pane showing a recent article -->
    </div>
    <div id="emailPane">
        <!-- Form to subscribe to email newsletter -->
    </div>
</div>

当网页为全宽时，两个顶级div，英雄和新闻是两列并排。这两列是左右浮动的。

现在发生的情况是，当页面低于两列的宽度时，第二列会转到第一列下方的下一行，即使第一列可以收缩到max-width以下。您可以通过转到小提琴，并将分隔符向右拖动以使用渲染结果缩小窗格来查看此内容。

当网页的水平长度减少到两列以下时，我希望第二列留在第一行，第一列开始缩小到max-width以下，直到它到达min-width （我还没有投入，但让我们说300px）。当第一列达到300px时，第二列应该转到下一行，第一列应该是大约650px，因为第二列是300px加上50px之间的边距。

我该怎么做？

Answer 1

您只需要改变html中内容的顺序：fiddle

HTML：

<div id="news">
                    <div id="newsPane">
                        <div id="newsPaneText">
                            <h1>Title</h1>
                            <p>Praesent et tellus ac augue tempus scelerisque. Integer pellentesque dapibus ornare. Donec faucibus hendrerit nisl vel fermentum. Mauris nec arcu bibendum, pellentesque lorem tincidunt, tincidunt nibh. Praesent tempus pellentesque tempus.</p>
                            <p>Sed feugiat rutrum velit, eget faucibus dolor porta nec. Vivamus auctor eros tellus, at congue purus ultrices in.</p>
                            <p>Fusce at nisi est. Praesent ac blandit nulla, sed dictum enim. Nunc consectetur metus id tempor congue. Etiam sed enim quis nisl elementum egestas. In hac habitasse platea dictumst. Ut cursus porttitor sagittis.</p>
                            <p>Maecenas vulputate odio id eleifend molestie. Ut quis sem eleifend, semper diam quis, accumsan erat. Maecenas faucibus tincidunt neque, vitae lacinia felis pellentesque in. Vestibulum commodo lorem eget purus sagittis, aliquet congue est cursus. In mattis, turpis scelerisque tincidunt posuere, lorem nisi vestibulum odio, ut scelerisque tortor mi et est. Suspendisse nisi nisl, interdum ac magna sit amet, consequat sodales augue. Maecenas dictum, erat ac elementum bibendum, sem sapien dapibus lectus, a dictum erat purus eget nisi. Pellentesque luctus tincidunt risus vitae gravida. Mauris justo augue, porta bibendum tincidunt quis, elementum feugiat mauris.</p>
                            <small>Article published on May 2, 2014</small>
                        </div>
                        <button id="newsReadMoreButton" class="largeButton" onclick="window.location.href = '/news/title';">Read more</button>
                    </div>
                    <div id="emailPane">
                        <div id="emailForm">
                            <label for="email">Enter your email address to get these important updates in your inbox.</label>
                            <input type="email" id="emailField" placeholder="you@example.com" />
                            <button id="emailSubmitButton" class="smallButton" onclick="submitEmailForm();">Continue</button>
                            <p id="emailFormStatus"></p>
                        </div>
                    </div>
                </div>
<div id="hero">
                    <div id="heroText">
                        <p>This is not helpful text,</p>
                        <p>and the image has nothing to do with this website.</p>
                    </div>
                    <div id="heroImage">
                    </div>
                </div>

Answer 2

我可以通过使用宽度的百分比将容器中的两个列包装起来然后为列宽度赋予100％的总和来使第二列保持在一行上。

请参阅：jsfiddle

此外，我认为使用媒体查询可能更容易，而不是依赖min-width / max-width。

如何使变量宽度的优先级高于CSS中div之间的换行符？

2 个答案: