Question

我正在尝试制作响应式网页布局。在首页上有一个div，里面有两个div。一个用于标题，一个用于图像。标题应始终保留在图像旁边，但图像和标题应缩放为较小的屏幕。

这是我的HTML;

<div class="content">
        <div class="caption">
        <h1>Blablabla</h1>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac ipsum quam, semper volutpat massa. Cras mattis malesuada sagittis. Cras luctus erat quis orci condimentum quis vulputate lectus venenatis. Proin lorem lorem, vehicula in porta id, facilisis id massa. Phasellus venenatis eros et diam dictum faucibus. Donec at rutrum orci. Vivamus quam sapien, mollis sed aliquet blandit, viverra nec enim. In sapien lectus, fringilla pretium sollicitudin eu, eleifend id mi. Phasellus ullamcorper massa vitae mauris</p>
        </div>
        <div class="image">
            <img src="pics02.jpg">
        </div>
    </div>

这是我的CSS;

    .content {
    margin: 0px auto;
    width:60%;
    background-color:black;
    margin-top:4em;
    display:block;
}

.caption {
    width:30%;
    background-color:white;
    height: auto;
    display:inline;
    margin:0px;
    color:green;
    float:left;
    padding:6px;
    display:block;
}

.image {
    display:inline;
    margin:0px;
    float:right;
    display:block;
}

.image img {
      max-width:100% !important;
    max-height:100% !important;
    display:block;
}

在堆栈的另一个主题中，我发现我应该设置img标签的最大宽度和高度，并将显示设置为阻止到处。不幸的是，当我进行缩放时，图像会变小，但是当缩放时图像会变小，但它会在标题下滑动。

Answer 1

<强> Live Demo

为什么习惯了多重值

.caption {
    width:30%;
    background-color:white;
    height: auto;
    display:inline;   // used to any one value
    margin:0px;
    color:green;
    float:left;   // used to any one value
    padding:6px;
    display:block; // used to any one value
}

用于班级.caption

中的一个媒体资源

不习惯multiple display value

中的single class

我想你想要 Live Demo

Answer 2

只需将此添加到您的图片css类：

   .image {
    display:inline;
    margin:0px;
    float:right;
    display:block;
    width: 60%;
}

希望这就是你想要的。

否则，如果您可以使用真实图片等更新此示例，我们可以提供更多帮助：http://jsfiddle.net/BJ8gK/30/

响应式css divs不会彼此相邻

2 个答案: