0

I'm trying to make responsive design.

There are mainly 2 sections such as left and right section. left section always has to be 300px and right section will be flexible width.

But minimum width has to be 300px and it should be shown on the bottom when it's narrower than 300px(See image below)

Why this CSS won't be responsive design like this image?

This is demo http://jsfiddle.net/5Uy2Y/ In my demo, I didn't put the border for each cell. Please ignore that.

enter image description here

HTML Can I probably remove <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
   }

}

Media Query を使用すると、幅の異なるデバイスにカスタム css を書き込むことができます。この例では.box、600px 未満の画面ではクラスの動作が異なります。

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

.boxjQuery の.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 に答える