Question

我正在移动网站上工作，网页需要根据纵向和横向模式进行更改。我有那个部分在工作。当移动设备处于纵向模式时，它假设显示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，因为我更像是程序员，而不是设计师。谢谢，感谢您提供的任何帮助。

Answer 1

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

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

请注意代码的读取时间更短，更容易。

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

Answer 2

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

当一个浮动被应用到它时，你不能指望中心。

我将float:left;和.my_left_box上的.my_right_box更改为text-align:left;并添加了display:inline-block;。然后，我将margin: 0 auto;和text-align:center;添加到.my_wrapper，并将宽度更改为90%。我没有对(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/

^{我无法在手机上测试它，但它应该可以正常工作}

将div框置于主div内

2 个答案: