Html 在CSS中，如何使可变宽度比div之间的换行符具有更高的优先级？

以下是我迄今为止的工作：

页面的结构如下所示：

<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，hero和news，是网页全宽时并排出现的两个列。这两列是左右浮动的

现在发生的情况是，当页面的宽度低于两列的宽度时，第二列进入第一列下方的下一行，即使第一列可以缩小到

max width

以下。您可以通过转到小提琴，并向右拖动分隔符来缩小具有渲染结果的窗格来看到这一点

当网页的水平长度减小到两列的长度以下时，我希望第二列保持在第一行，第一列开始缩小到

max width

以下，直到达到

min width

（我还没有输入，但假设为300px）。当第一列达到300px时，第二列应该转到下一行，第一列应该大约为650px，因为第二列是300px加上中间的50px余量

---

如何做到这一点？

我能够让第二列保持在一行上，方法是将两列都包装在一个容器中，使用其宽度的百分比，然后给列宽度加上100%的总和

见此：

---

此外，我认为使用媒体查询可能更容易，而不是依赖

minwidth

/

max width

您只需改变html中内容的顺序即可：

HTML:

标题
这是一个节杖。整型pellentesque dapibus ornare。Donec faucibus hendrerit nisl vel发酵液。毛里斯·内克·阿库·比本杜姆，佩伦特斯·洛伦·蒂奇登，蒂奇登·尼布。临时性的临时性的临时性的临时性的

这是我的宿命，我的宿命。维瓦摩斯拍卖人厄洛斯·特卢斯（eros tellus），位于华盛顿的康格·普鲁斯乌尔特里斯（congue purus ultrices）

尼西东部的福斯。这是一个很好的例子。我是临时工。这是一种新的生活方式。在hac habitasse Plateum，一句名言。弓形门弓

Maecenas是一个很好的律师。测量仪，测量仪，测量仪。梅塞纳斯·福西布斯·汀西顿·内克，拉齐尼亚·菲利斯·佩伦茨克的生命。前庭通常为矢状purus sagittis，前庭为congue，前庭为cursus。在《马蒂斯》中，图尔皮斯的权杖属于波苏尔，而奥迪奥的前庭则属于奥迪奥，而托托的权杖则属于奥迪奥。日产汽车有限公司，国际汽车制造商，苏打啤酒制造商。这是一个名言，是一个重要的元素，是一个智者，是一个名言。孕妇的生命。莫里斯·胡斯托·奥古斯，比本杜姆门，莫里斯封建元素

文章发表于2014年5月2日
阅读更多
输入您的电子邮件地址以在收件箱中获取这些重要更新。
持续

这不是有用的文本

而这张图片与这个网站无关

第二列右侧的边距太大。。。使用媒体查询不允许列逐渐扩展。当屏幕太窄时，我已经打算用它们来调整栏目的位置，但它们不是响应性网页设计的替代品。

<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>