Question

所以我有两个div，它们彼此相邻，有一个类.category，它们应该是响应的。

<div class="content">
    <div class="category">
        <img src="images/category1.jpg" alt="" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor.
        </p>
    </div
    <div class="category">
        <img src="images/category2.jpg" alt="" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
        </p>
    </div>
</div>

这是我的CSS：

.content {
    width: 100%;
    background: red;
}

.category {
    max-width: 470px;
    background: #ffffff;
    display: inline-block;
    vertical-align: top;
    position: relative;
}

当我开始调整窗口大小时，第二个.category块会移动到第一个.category块下面。但是，我希望.category块的宽度都减小并且彼此相邻。

有人有任何建议吗？

Answer 1

首先，您的HTML标记中有一些印刷错误（您在第一个类别div的结束div标记上缺少>符号。）

其次，你应该使用百分比宽度来响应这样的响应元素：

<强> FIDDLE

CSS：

.content {
    width: 100%;
    background: red;
}

.category {
    max-width:470px;
    width: 50%;
    background: #ffffff;
    float:left;
    vertical-align: top;
    position: relative;
}

Answer 2

在css中将float:left;添加到.category并使用%或css媒体查询

@media(min-width:something;){
   .category {
      width: something;
   }
}

设置元素的宽度。

响应式div不会扩大规模

2 个答案: