0

我正在尝试进行响应式设计。

主要有左右两个部分。左侧部分始终必须为 300 像素，右侧部分将是灵活宽度。

但最小宽度必须为 300 像素，当宽度小于 300 像素时应显示在底部（见下图）

为什么这个 CSS 不会像这张图片那样是响应式设计？

这是演示http://jsfiddle.net/5Uy2Y/ 在我的演示中，我没有为每个单元格设置边框。请忽略这一点。

在此处输入图像描述

HTML我可以删除<div class="box">吗？

<div class="Row">
    <div class="box">
    <div class="Left">  
        <div class="posted_at">July 22, 2013 04:34:14</div>
        <div class="user">John Smith</div>
        <div class="location">California</div>
    </div>
    </div>

    <div class="box">
    <div class="Right">
        <div class="body">Hello, I'm John Smith Nice to know you</div>
    </div>
    </div>

</div>

CSS

div.Row{
    border:2px solid rgb(0, 0, 0);
    min-width: 300px;
    margin-bottom: 20px;
    margin-right: 20px;
    float:left;
    display:block;  
}

div.Box{
    padding:0px;
    text-align:center;
    float:left;
}

div.Left{
    width:300px;
    text-align:center;
    padding:5px;
    clear:both;
}

div.Right{
    text-align:left;
    clear:both;
    min-width: 300px;
}

div.posted_at{
}
div.user{
}
div.location{
}
div.body{
}
4

1 回答 1

3

使用媒体查询：

@media (min-width: 600px) 
{

   .box{
    display:block;
    position:static;
    float:none
   }

}

使用媒体查询，您可以将自定义 css 写入具有不同宽度的设备。在此示例中，.box该类在小于 600 像素的屏幕上表现不同。

http://www.w3.org/TR/css3-mediaqueries/

您还可以.box使用 jQuery 的.removeClass()方法删除该类。

http://api.jquery.com/removeClass/

这就是我在没有媒体查询的情况下会做的事情。

.box{
    padding:0px;
    text-align:center;
    display:inline-block;
}

.Left{
    width:300px;
    text-align:center;
    padding:5px;
    border:solid 1px black;
}

.Right{
    text-align:left;
    width: 300px;
    border:solid 1px black;
}

你可以在这里看到小提琴http://jsfiddle.net/5Uy2Y/1/

于 2013-01-24T02:40:48.067 回答