在窗口调整大小时垂直移动div块

Question

http://jsfiddle.net/KZP7r/ 我正在尝试做类似以下的事情，但有两个文本块而不是图像和一些文本。

我试图有两个文本块，水平相邻，但是当窗口变小时，右边的文本会移到左边文本的下方。

页面即时编辑在这里：

希望有人可以提供帮助！

<div class='wrapper'>
<img/>
<div class='content'>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

img{
height:200px;
width:200px;
border:1px solid grey;
}
img, .content{
float:left;
display:inline-block;
}
.content{
max-width:60%;
min-width:200px;
}

Answer 1

Example (resize window pane left and right to see effect)

必须将left文本包装在一个包装器中，以便它自行浮动。工作出色。

CSS：

.content {
    font-weight: bold;
    font-size: 150%;
    border:1px solid red;
}
@media (max-width: 539px) {
    .content, .left {
        float: none;
        display: block;
        width: 100%;
    }
}
@media (min-width: 540px) {
    .content, .left {
        float:left;
        display:inline-block;
        min-width:200px;
    }
    .content {
        box-sizing: border-box;
        max-width:60%;
    }
    .left {
        max-width: 40%;
    }
}

HTML：

<div class='wrapper'>
    <div class='left'>Lorem Ipsum's brother on his left...</div>
    <div class='content'>Lorem Ipsum is simply...</div>
</div>

使用@media查询。

Answer 2

这个fiddle包含一个简单的技术示例。您需要一些媒体查询来调整容器的宽度，使其最小宽度将列分成不同的行。

你只需将它们设置为显示：block，向左浮动并给它们一个宽度。

.content{
    float:left;
    display:block;
    width: 50%;
    min-width: 200px;
}

Answer 3

在float: left标记

中使用'img'