在窗口調整大小時垂直移動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

示例（左右調整窗口窗格的大小以查看效果）

必須將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

這個小提琴包含了該技術的一個簡單示例。 您將需要一些媒體查詢來將容器的寬度調整為將列分成不同行的最小寬度。

您只需將它們設置為display：block，向左浮動並為其設置寬度。

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

Answer 3

使用float: left在'img'標簽中