0

我有这个 CSS / HTML 代码：

.ex1 .box-left {
    display:inline-block;
    width: 33%;
    max-width: 190px;
    float: left;
    margin:10px 0 0 70px;
}
.ex1 .box-middle {
    width: 33%; /* width of the logo */
    margin:10px auto 0 auto;
}
.ex1 .box-right {
    display:inline-block;
    width: 33%;
    max-width: 190px;
    float: right;
    margin:10px 70px 0 0;
}

<div class="ex1">
        <div class="box-left">text goes here</div>
        <div class="box-right">text goes here</div>
        <div class="box-middle">text goes here</div>
    </div>

我需要它们以相同的边距彼此相邻地显示，并且在页面的中心之间具有相同的边距，但是当窗口变小时，如果它们不适合它们应该开始显示在彼此下方

有什么想法我能做什么？

4

5 回答 5

1

所有你需要的是Responsive Web Design

查看另一个有用的资源

于 2013-03-28T13:01:22.000 回答
0

您需要使用“媒体查询”——如何使用！检查这个也这个

您可以使用所有尺寸的样式，就像

@media screen and (max-width: 1024px) {
//your styles for this resolution 
}
@media screen and (max-width: 960px) {
//your styles for this resolution 
}
@media screen and (max-width: 800px) {
//your styles for this resolution 
}
@media screen and (max-width: 480px) {
//your styles for this resolution 
}
@media screen and (max-width: 320px) {
//your styles for this resolution 
}
于 2013-03-28T13:06:17.643 回答
0

首先，你修复主 div，然后在所有 3 个 div 中给出一个浮点数。

<div class="ex1">
        <div class="box-left">text goes here</div>
        <div class="box-right">text goes here</div>
        <div class="box-middle">text goes here</div>
<div style="float:none; clear:both;"
    </div>

.ex1 {width:960px; margin:0 auto;}
.ex1 .box-left {
    width: 33%;
    max-width: 190px;
    float: left;
    margin:10px 0 0 70px;
}
.ex1 .box-middle {
    width: 33%; /* width of the logo */
    margin:10px 0 ;
float:left;
}
.ex1 .box-right {
    width: 33%;
    max-width: 190px;
    float: right;
    margin:10px 70px 0 0;
}
于 2013-03-28T13:06:48.380 回答
0

删除所有浮动属性，因为您已应用 display:inline-block。

这是您能找到的最简单的方法。

这是标记：

<div class="globalcontainer">
    <div class="ex1">
    <div class="ex-box">Left</div>
    <div class="ex-box">Middle</div>
    <div class="ex-box">Right</div>
    </div>
</div>

这是CSS：

.globalcontainer {width:100%; height:auto; overflow:auto; background-color:#333;}
.ex1 { text-align:center; margin:0 auto;}
.ex-box{
    display:inline-block;
    min-width:100px;
    max-width: 190px;
    margin:10px 5px;
    background-color:#f90;
}

此代码将满足您在完整浏览器上以相同边距居中所有 div 的要求，并且在调整大小后，它们将以其特定边距垂直向下显示。

由于中间是您的标志，只需为另一个类设置样式并添加您需要美化它的任何内容！

于 2013-03-28T13:27:02.473 回答
0

有些人会不赞成使用此解决方案text-align来居中文本以外的内容，但这似乎可以满足您的要求：http: //jsfiddle.net/3hfPZ/

这是标记：

<div id="main">
    <div class="box red"></div>
    <div class="box blue"></div>
    <div class="box yellow"></div>
</div>

和CSS：

#main { margin: auto; text-align: center; }
.box {
    display: inline-block;
    width: 200px;
    height: 100px;
    margin: 10px;
}
.red { background: red; }
.blue { background: blue; }
.yellow { background: yellow; }

我选择的颜色和大小是任意的，只是为了弄清楚 div 发生了什么。

于 2013-03-28T13:15:05.663 回答