向左浮动，最大宽度和流量控制

Posted 2023-03-06

【中文标题】向左浮动，最大宽度和流量控制

【英文标题】：float left, max-width and flow control

【发布时间】：2014-02-08 13:00:01

【问题描述】：

理想情况下，我想要一个 16-30em 之间的可变宽度左面板和一个固定在 16em 宽的右面板。当屏幕缩小到 32em 或更少时，我希望右侧面板在左侧下方流动。我希望这一切都左对齐。

我发现了几个并排的例子，但通过浮动它和可变右面板，或浮动右和可变左面板，只有一个固定宽度的左侧。我设法把一个外部的 div 放在东西周围，并使布局工作到我想在左侧下方（或右侧下方的左侧 - 我不关心哪个）：

http://jsfiddle.net/Ph3S8/2/

我尝试使用@media (min-width: 15em) 并在其中嵌套一些更改，因为基本上当屏幕小于.left:min-width + .right:min-width 时，我只需要取出右侧面板上的 float:right，但似乎没有任何效果（我不确定它是否应该在 jsfiddle 中，但在我的真实示例中也没有。我不介意哪个面板弹出另一个面板，但我只需要它适用于具有标准 CSS 的移动设备 - 我当屏幕达到 72ems 等时还有其他可以工作的东西，但我没有写那个:)

非常感谢任何帮助。

【问题讨论】：

解决了您的问题吗？

是的，基于我的原始帖子，没有边距。当我添加边距时，我必须记得将其取出。

【参考方案1】：

根据艾伦的回答，我更新了我的小提琴以尝试找出我做错了什么

http://jsfiddle.net/Ph3S8/3/

我必须将边距和移动到媒体选择器中，如下所示：

@media (min-width:17em) 
    .right 
        float:right;
    
    .left 
        margin-right:5em;
    

出于某种原因，我不得不在选择器上添加 2 个 em 的填充或 div 的重叠。

不管怎样，我发布这个是为了澄清我原来的帖子，艾伦的回答比我的要好。

【参考方案2】：

enter code here*** 中提出的这个问题：What does @media screen and (max-width: 1024px) mean in CSS? 查看此页面：http://www.w3schools.com/css/css_mediatypes.asp 所有浏览器和事件的媒体屏幕

 /* Smartphones (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) 
    /* Styles */
    

    /* Smartphones (landscape) ----------- */
    @media only screen 
    and (min-width : 321px) 
    /* Styles */
    

    /* Smartphones (portrait) ----------- */
    @media only screen 
    and (max-width : 320px) 
    /* Styles */
    

    /* iPads (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    /* Styles */
    

    /* iPads (landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape) 
    /* Styles */
    

    /* iPads (portrait) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : portrait) 
    /* Styles */
    

    /* Desktops and laptops ----------- */
    @media only screen 
    and (min-width : 1224px) 
    /* Styles */
    

    /* Large screens ----------- */
    @media only screen 
    and (min-width : 1824px) 
    /* Styles */
    

    /* iPhone 4 ----------- */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) 
    /* Styles */
    

【讨论】：

感谢 Alexanderi，这是一个很好的参考，我确实读过这个。 CSS 对我来说仍然是一门黑暗的艺术，虽然我可以用它们中最好的来着色、填充和字体，但读到我的小问题有更多的问题而不是答案。

【参考方案3】：

使用此媒体查询。

@media (max-width: 15em)

    .right 
         width: auto;
         float:none;