Question

我有这个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>

我需要它们以相同的边距显示彼此相邻的每一个和页面的中心之间但是当窗口变小时，如果它们不适合它们应该开始显示在每个下面其他

任何想法我能做什么？

Answer 1

您所需要的只是Responsive Web Design

再看一个useful resource

Answer 2

您需要使用“媒体查询” - 如何使用！ check this也this

您可以使用各种尺寸的样式，例如

@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 
}

Answer 3

首先你修复主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;
}

Answer 4

有些人会对此解决方案不满意使用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发生了什么。

Answer 5

删除所有浮动属性，因为您已应用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的要求，并且在调整大小后，它们将以其特定边距垂直向下显示。

因为中间是你的标志，所以只需设计另一个类，然后添加你需要的任何东西来美化它！

显示3个内联div

5 个答案: