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

もう 1 つの有用なリソースを参照してください

于 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

display:inline-block を適用したため、float プロパティをすべて削除します。

これは、見つけることができる最も簡単な方法です。

マークアップは次のとおりです。

<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 に答える
0

まず、メインの div を修正し、3 つの div すべての内部で float を指定します。

<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 に答える