Question

我正在寻找解决问题的方法，但我找不到答案。

我有一个流体div，内有文本和两个堆叠图像，内嵌显示。我希望文本在视口变窄时包装图像。在移动视口宽度处，图像需要在文本下方100％宽度处显示，宽度也为100％。

我能够在桌面宽度堆叠图像的唯一方法是将它们放入具有设定宽度的浮动div中，图像div放在html中的文本之前。

如果我将图像div放在文本之后，文本会在桌面宽度处跨越容器的宽度，将图像推到文本下方。

但是，这是在移动视口宽度下让图像在文本下方滑动的唯一方法。

提前感谢任何想法 - 这似乎很简单，但我不能让它按需要运作。

这里是fiddle。

这是HTML：

<div class="content">

    <div class="primaryContent">

        <div class="aboutImage">

            <img class="img" src="http://s14.postimg.org/t11gqnz5p/square.png">
            <img class="img" src="http://s14.postimg.org/t11gqnz5p/square.png">

        </div>

        <h1>About</h1>

        <p>A whole bunch of text. A whole bunch of text.  A whole bunch of text.  A whole bunch of text.  A whole bunch of text.  A whole bunch of text. A whole bunch of text.  A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text.</p>

        <p> A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text.</p>

    </div><!--end primaryContent -->

    <aside class="sideBar group">

        <p>A bunch on content. A bunch on content. A bunch on content. A bunch on content. A bunch on content. A bunch on content. A bunch on content. A bunch on content. A bunch on content.</p>

    </aside>

</content>

CSS：

.content {
    width:100%;
    display:inline-block;
}

.primaryContent {
        display:inline-block;
        width: 70%;
        float:left;
        vertical-align:top;
        background-color:lightgrey;
        margin:0;
        padding:0;
    }

.aboutImage {
        width: 40%;
        float:right;
    }

.img {
    width: 100%;
    margin:0;
    padding:0;
}

.img img {
    width:100%;
    margin:0;
    padding:0;
}

.sideBar {
    width:29%;
    float:right;
    background-color: lightgrey;
    border-left: solid 1px black;
}

.group:after {
        content:" ";
        display:table;
        clear:both;
    }

Answer 1

查看DOM的布局。

正如您目前所拥有的那样，您需要添加许多其他代码才能获得您正在寻找的移动响应体验。

我建议将图像和内容嵌套到容器中，然后将整个容器浮动

<div class="content">

  <div class="leftContent">

    <div class="mainContent">

           <!--Text Comes Here-->
    </div>

    <div class="images">

           <!--Images to be here-->
    </div>

  </div>
  <aside class="sideBar group">
           <!--Sidebar content here-->
  </aside>

这将允许您根据需要浮动元素，并使用media queries进行必要的更改。

我在这里为你做了一个小提琴：http://jsfiddle.net/8QmLL/

同时检查您的结束HTML标记。您正在关闭</content>，但您应该关闭</div>

流体设计中的浮动图像和文本换行

1 个答案: