0

我正在尝试制作响应式网页布局。在首页有一个 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 标签设置为最大宽度和高度，并将显示设置为在任何地方阻塞。不幸的是，当我缩放时这不起作用，当你缩放时图像会变小，但它会在标题下方滑动。

4

2 回答 2

1

现场演示

你为什么习惯于多重价值

.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

我想你想要这个现场演示

于 2013-04-12T11:41:16.190 回答
1

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

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

希望这是你想要的。

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

于 2013-04-12T11:44:33.480 回答