2

我正在一个移动网站上工作，该网站需要根据纵向和横向模式更改页面。我有那部分工作。当移动设备处于纵向模式时，假设显示 4 个框，如下所示：

[] []
[] []

在横向模式下，它们应该是这样的：

[] [] [] []

我已经完成了大部分工作，但是在纵向和横向模式下，它们都居中。我已经搜索了这个站点并发现了类似的问题，但是在尝试实施该解决方案时，它似乎不起作用。我希望它们居中（使用百分比而不是固定宽度，以便在任何移动设备上正确显示）。我对CSS不太熟悉，所以请原谅我，但这是我的代码：

/* Landscape mode (default) */
div.my_wrapper{
width: auto;
position:relative;
padding:20px;
}

div.my_innerBox {
    width:100%;
    float:left;
    border: 1px solid green;
}

div.my_left_box{
    float: left;
    margin-right:10px;
    padding: 20px;
    /*margin-left:90px;*/

    width: 16%;
    border: 1px solid gray;
}

div.my_right_box{
    float: left;
    margin-right:10px;
    padding:20px;

    width: 16%;
    border: 1px solid gray;
}

div.my_header{
    padding:10px;
    float:left;
    width: 100%;
    border: 1px solid gray;
    margin-bottom:12px;
}

@media only screen and (orientation:portrait){
/* portrait mode */
div.my_wrapper{
width: inherit;
margin-left:auto;
margin-right:auto;
padding:20px;
}

div.my_innerBox {
    width: 95%;
    display:inline;

}
div.my_left_box{
    float: left;
    padding: 20px 10px;
    /*margin-left:90px;*/
    margin: 0 10px 10px 0;
    width: 30%;
    border: 1px solid gray;
}

div.my_right_box{
    float: left;
    margin: 0 10px 10px 0;
    padding:20px 10px;
    width: 30%;
    border: 1px solid gray;
}

div.my_header{
    padding:10px;
    border: 1px solid gray;
    margin-bottom:12px;
    text-align:left;
    float:left;
}
div.my_desc {
    text-align:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    vertical-align:middle;
    position:absolute;
    float:left;
    width:500px;
}
div.my_header_container {
    width:100%;
    float:left;
}
}


<div class="my_header_container">
    <div class="my_header">Title Will Go here
        <div class="my_desc">This is where the description content will    go</div>
    </div>
</div>
<div class="my_wrapper">
    <div class="my_left_box">
        Button 1
    </div>

    <div class="my_right_box">
        Button 2
    </div>
    <div class="my_left_box">
        Button 3
    </div>

    <div class="my_right_box">
        Button 4
    </div>

</div>

另外，我需要它说“这是内容描述的地方”在“标题将在这里”的右侧，并垂直居中。

任何帮助将不胜感激。我正在尝试学习 css，因为我更像是一名程序员，而不是设计师。谢谢你，我很感激你可以发送给我的任何帮助。

4

2 回答 2

1

您应该真正考虑使用 SASS 预处理器并利用众多 Compass 扩展的强大功能。

这是使用 SASS 解决问题的方法：http: //sassbin.com/gist/5785963/

请注意代码更短、更容易阅读。

@fredsbend 说你不能把漂浮的东西居中。好吧，当 SASS 自动根据您的喜好精确设置所有元素的宽度时，情况并非如此，而您只提供列号。

于 2013-06-14T23:13:49.713 回答
0

首先，您缺少@media查询的右括号。

当浮点数被应用到某个东西时，你不能期望它居中。

我更改了float:left;on.my_left_box和.my_right_boxtotext-align:left;并添加了display:inline-block;. 然后我添加了margin: 0 auto;and并将宽度更改为. 我没有对该部分进行这些更改。text-align:center;.my_wrapper90%(orientation:portrait)

这是CSS：

/* Landscape mode (default) */
div.my_wrapper{
width: 90%;
position:relative;
padding:20px;
    margin: 0 auto;
    text-align:center;
}

div.my_innerBox {
    width:100%;
    float:left;
    border: 1px solid green;
}

div.my_left_box{
    margin-right:10px;
    padding: 20px;
    /*margin-left:90px;*/
    display:inline-block;
    width: 16%;
    border: 1px solid gray;
    text-align:left;
}

div.my_right_box{
    margin-right:10px;
    padding:20px;
    display:inline-block;
    width: 16%;
    border: 1px solid gray;
    text-align:left;
}

div.my_header{
    padding:10px;
    float:left;
    width: 100%;
    border: 1px solid gray;
    margin-bottom:12px;
}

@media only screen and (orientation:portrait){
/* portrait mode */
div.my_wrapper{
width: inherit;
margin-left:auto;
margin-right:auto;
padding:20px;
}

div.my_innerBox {
    width: 95%;
    display:inline;

}
div.my_left_box{
    float: left;
    padding: 20px 10px;
    /*margin-left:90px;*/
    margin: 0 10px 10px 0;
    width: 30%;
    border: 1px solid gray;
}

div.my_right_box{
    float: left;
    margin: 0 10px 10px 0;
    padding:20px 10px;
    width: 30%;
    border: 1px solid gray;
}

div.my_header{
    padding:10px;
    border: 1px solid gray;
    margin-bottom:12px;
    text-align:left;
    float:left;
}

} /* Added here but maybe you want it somewhere else. */

div.my_desc {
    text-align:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    vertical-align:middle;
    position:absolute;
    float:left;
    width:500px;
}
div.my_header_container {
    width:100%;
    float:left;
}

这是jsfiddle：http: //jsfiddle.net/tspT4/10/

我无法在手机上对此进行测试，但它应该可以工作

于 2013-06-14T22:50:10.153 回答