获取文本以低于图像响应答案

【问题标题】：Get text to go below image responsive获取文本以低于图像响应
【发布时间】：2016-03-13 08:23:22
【问题描述】：

我正试图让我的媒体查询正常工作，但image 正在显示@ 100% 的屏幕（这是我想要的），但.right 上的文本仍然是来自@ 的floating 987654326@ 声明（参见图片右侧的白色“文字”）。

这是media queries css

@media screen 
  and (max-width: 480px){ 
    #header .header_adjust{
        width:98%;
    }

    #header .header_adjust .left {

        width:100%;
        height: auto;
        margin:0%;
        background-color:red;
    }
        #header .left img{
            margin:0%;
            width:100%;
            height:auto;

        }

    #header .header_adjust .right {
        float:none;
        width:100%;
        height:auto;
        clear:both;
        margin:0%;
        background-color:black;
    }
  }

原始 css：

#header .header_adjust {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }

    #header .left{
        width:17.95833335%;
        float:left;
/*      background-color: red;*/
    }
        #header .left img{
            margin:0%;
            max-width:100%;
            max-height:100%;
            -moz-border-radius:5px 20px 5px; -webkit-border-radius:5px 20px 5px; border-radius:5px 20px 5px;
        }
    #header .right{
        width:79.95833335%;
        max-height:100%;
        min-height:100%;
        margin:0% 1%;
        /*background-color: red;*/
        background:
            linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
            linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
            linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
            linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
            linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
            linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
            background-color: #131313;
            background-size: 20px 20px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        float:right;
    }

html：

<div class="header_adjust">
    <div class="left">
        <img src="{{ url_for('static', filename='my_pic.jpg') }}" alt="My Pic" />
    </div><!--left-->
    <div class="right">
        <h2>
        Test test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Tes              
        </h2>
    </div><!--right-->
    <div id="clear"> </div>
</div><!--header_adjust-->

【问题讨论】：

width:98% 来自标头可能是一个线索。您希望在大屏幕和小屏幕上看到什么？
在完全显示 1400 宽度或更大宽度时，.left 和 right 是浮动的（目前正在处理“原始 css”。但是，在 480 宽度上，它们仍然是浮动的，并且 .right() 是浮动的页面宽度为 480
引导 CSS 图片参考 stackoverflow.com/questions/18903183/… w3schools.com/bootstrap/bootstrap_ref_css_images.asp
@Cola - 我没有使用引导程序...
@AlexandruSeverin - #header .header_adjust{} 最终控制它，但我如何调整它以允许 #header .header_adjust .left{} 占用整个空间，以及 #header .header_adjust .right{} 占用整个空间？

标签： css media-queries

【解决方案1】：

使用display: flex，子元素将并排显示，即使它们没有浮动。见这里：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

您可能可以通过包含此指令来解决您的问题：

@media screen and (max-width: 480px) { #header .header_adjust { display: block; } }

示例：http://jsfiddle.net/pbosakov/apfy0nLw/

【讨论】：