Change order and positioning using only css

2019-05-29 01:20发布

站内问答 / HTML/CSS
1357 4 4

How I can change element order and positions within a div using media queries? The following image shows the desired behaviour(use left image when browser window is smaller than 1000px wide, the second when bigger.):

positioning

My first attempt using 'normal' placement on first case and use float on the second:

.box2 {
  float: right;
}

but then the element 2 (green) aligns on extreme right of container. Not close to the first element.

fiddle: http://jsfiddle.net/vmkRM/1/

4条回答
不美不萌又怎样
2楼-- · 2019-05-29 01:42

Although it is not really well enough supported by FF and IE, the flex-box model is the right way to do it (conceptually at least if not for practical purposes). Check out this with chrome:

http://jsfiddle.net/38cNE/4/

The key parts are:

#container1 {
    width: 200px;
    height: 200px;
    display: -webkit-flex;
    -webkit-flex-wrap:wrap;
    -webkit-flex-direction:row;
    -webkit-justify-content:center;
    -webkit-align-items:center;
}

#container2 {
    width: 400px;
    height: 150px;
    display: -webkit-flex;
    -webkit-flex-direction:row-reverse;
    -webkit-justify-content:space-around;
    -webkit-align-items:center;
}
查看更多
0人赞 添加讨论(0) 举报
▲ chillily
3楼-- · 2019-05-29 01:51

try this

http://jsfiddle.net/vmkRM/3/

<head runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <style type="text/css">
                @media (max-width: 1000px)
    {

        .container
        {
            width: 200px;
            height: 200px;
        }
        .box1
        {
            margin: 26px 24px;
        }
        .box2
        {
            margin: 13px;
        }
    }
    @media (min-width: 1000px)
    {
        .container .box1
        {
            float: right;
        }
        .container
        {
            width: 400px;
            height: 150px;
        }
        .box1
        {
            margin: 50px 31px;
        }
        .box2
        {
            margin: 31px;
        }
    }
    .container
    {
        border: 1px solid black;
    }





    .box1
    {
        width: 150px;
        height: 40px;
        background-color: #97D077;
    }
    .box2
    {
        width: 170px;
        height: 80px;
        background-color: #FFB366;
    }
    </style>
    <div class="container" id="container1">
        <div class="box1">
            text</div>
        <div class="box2">
            img</div>
    </div>
</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
祖国的老花朵
4楼-- · 2019-05-29 02:00

Assuming you have standard HTML that looks like this:

<div id=outer>
    <div id=box1></div>
    <div id=box2></div>
</div>

And CSS like this:

#box1 {
    width: 150px;
    height: 50px;
    background-color: green;
    margin: 10px;
}
#box2 {
    width: 200px;
    height: 100px;
    background-color: orange;
    margin: 10px;
}

I'd achieve the narrow version by adding this CSS:

#box1, #box2 {
    margin-left: auto;
    margin-right: auto;
}

And I'd achieve the wide version by adding this CSS instead:

#outer {
    float: left;
}
#box1, #box2 {
    float: right;
}
#box1 {
    margin-top: 35px;
}

Note that I'm cheating a bit by manually calculating the extra top-margin in order to vertically align the boxes.

Putting it all together with media queries to do it automatically would look like this:

#box1 {
    width: 150px;
    height: 50px;
    background-color: green;
    margin: 10px auto 10px auto;
}
#box2 {
    width: 200px;
    height: 100px;
    background-color: orange;
    margin: 10px auto 10px auto;
}
@media (min-width: 450px) {
    #outer {
        float: left;
    }
    #box1, #box2 {
        margin: 10px;
        float: right;
    }
    #box1 {
        margin-top: 35px;
    }
}

A working fiddle is here: http://jsfiddle.net/UwtZW/
(Note that I've used narrower widths to make it work nicely in the fiddle - but it should be easy to adapt to the actual widths you need)

If anybody knows how to achieve the vertical alignment automatically without knowing the heights, I'd be very interested to learn. When I try, I can't get past the float / vertical-alignment conflict.

查看更多
0人赞 添加讨论(0) 举报
地球回转人心会变
5楼-- · 2019-05-29 02:08

use width 100% for parent DIV, just look this fiddle

<div style="width:100%">
<div style="width:200px;height:200px;border:solid 1px black;position:relative;float:left"></div>
<div style="width:200px;height:100px;border:solid 1px black;position:relative;float:left;margin-top:50px;margin-left:50px">
</div>

http://jsfiddle.net/ablealias/zCFff/

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)