响应式 css div 不会彼此相邻

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

只需将其添加到您的图像 css 类中：

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

希望这是你想要的。

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

Answer 2

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

不习惯在single class 中使用multiple display value

我想你想要这个Live Demo